Benpian access micro-channel small program development notes (three) , here is mainly to achieve some common effects, enhance understanding and use of micro-channel applet UI. The bit length of any desired length can be a look 123
1) a list of the left slide cart delete item
Although I personally do not like the left slide right slide to remove, but little brother UI design is such a function, so, happy enough to roll up its sleeves and is doing! First on a renderings
Part of the code:
wxml
<scroll-view scroll-x scroll-into-view="{{toView}}">
<!--id 为了删除后 控制view 滚动到初始位置 -->
<view id='scroll-before' class='flex-row white-bg w900'>
<view >item布局 此处省略</view>
<view class='scroll-del' bindtap='tapDrop' data-id='{{index}}'>删除</view>
</view>
</scroll-view>
js
// 删除之后 回滚到初始状态
let toView = 'scroll-before'
that.setData({
toView: toView
})
wxss
/** 去掉scroll-view的滚动条 ，如果多个不同用途的scroll-view ，则所有的都不显示滚动条 **/
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
A disadvantage of this approach is that if the user is not deleted after sliding operation continues when loading data, this slide to half of the state still exist, and will not be rolled back to its original state.
2) tabBar effect
Small micro-channel program provides its own tabBar, tabBar can be configured in app.json, click [micro-channel global configuration applet] view details, renderings below
Not here this official, to see documentation on it, no need to read my nonsense Caesar.
First, to achieve a top tabBar, renderings:
wxml: in fact, a View placed horizontally, the contents of the cycle remove the tab, will find use herein is <view /> instead <scroll-view /> so when too much content will appear when congested, if the content excessive consider using <scroll-view />, is selected so that the two states and not selected to judge, show a different view
<view class='top-tab'>
<block wx:for='{{tabs}}' wx:for-index="index" wx:key='tabs'>
<view wx:if='{{item.isSel}}' class='tab-navigation-bar padding-l20 padding-r20 padding-b20 font34 selcted' data-id='{{index}}' bindtap='tapTab'>
<text class='selected'>{{item.text}}</text>
</view>
<view wx:else class='tab-navigation-bar padding-l20 padding-r20 padding-b20 font34' data-id='{{index}}' bindtap='tapTab'>
<text>{{item.text}}</text>
</view>
</block>
</view>
wxss: The overall tab attached to the top of the screen, and then is checked and unchecked in the two states. The following selected time drew a line, change the text color
.top-tab {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding-top: 20rpx;
padding-bottom: 20rpx;
}
.tab-navigation-bar {
color: #333;
font-size: 28rpx;
}
.tab-navigation-bar .selected {
border-bottom: 8rpx solid #fa6e57;
padding-bottom: 10rpx;
color: #fa6e57;
font-size: 28rpx;
}
js, changing the switching state when clicked
/**
* 切换tab
*/
tapTab:function(e){
let that = this
var idx = e.currentTarget.dataset.id
var tabs = that.data.tabs
// 设置选中的效果
tabs.map(function(item,index,arr){
if(index === idx){
item.isSel = true
}else{
item.isSel = false
}
})
that.setData({
tabs:tabs
})
In fact, I discovered that writing is not quite simple, and so on, you think I just want to switch to this effect, how to do the following data, different tab corresponding to the different content of it, the contents list has a waterfall as well as designer imagine the various pages, OK, continue, we can know ifor hiddencontrol the view of the show and hide, under which flew understand it, we define a variable used to record the index of the current page, real-time updates when switching variable values it can achieve different page display of results, and what you want to have what.
ifWhether rendering templates within the conditional block, triggers partial rendering to ensure that the conditional block, destroyed or re-rendering when switching. If the initial condition is false to render the frame does nothinghiddenassemblies will always be rendered simply hide and display control, and does not trigger re-rendering and destruction
if the state of frequent switching is usedhidden, otherwise useif
So here we use hidden. By curNav control currently displayed on it, then you can update at the js
<view hidden='{{curNav != 0}}'>
hahaha 测试第一个view
</view>
<view hidden='{{curNav != 1}}'>
hahaha 测试第二个view
</view>
<view hidden='{{curNav != 2}}'>
hahaha 测试第三个view
</view>
<view hidden='{{curNav != 3}}'>
hahaha 测试第四个view
</view>
<view hidden='{{curNav != 4}}'>
hahaha 测试第五个view
</view>
that.setData({
tabs:tabs,
curNav:idx,
})
If the UI is the same, you need not to write it, only you need to control it when loading data.
3) list processing
FIG effect as
At first started doing this gridview similar effect, feeling quite troublesome, then read it again css systems related properties, find content can be controlled by flex layout of flex-wrap if Wrap display, so it is easy to deal with the much more attractive, and it may also appear in reverse display may be needed.
Use the list loop for loop, wx:for-itemyou can specify the name of an array variable current element, wx:for-indexyou can specify the current array subscript variable names, can be obtained by the sub-view data-idto bind data, generally binding is standard, can also bind a an array of values, it is practical, by js the e.currentTarget.dataset.idvalue of the acquired bound
<view class='grid margin-t20'>
<block wx:for="{{lists}}" wx:key="lists" wx:for-item='item' wx:for-index='index'>
<view class='grid-item'>
<image src='{{item.img}}' mode='widthFix' class='fillet' data-id='{{index}}' bindtap='tapImg'></image>
<text class='c-333 font32 txt' data-id='{{item}}' bindtap='tapTxt'>{{item.title}}</text>
<text class='c-999 font24'>{{item.desc}}</text>
</view>
</block>
</view>
Click on the image and text, respectively, the value of the element and the array index corresponding to the print
Ah it, here it is finished, and you want to help, thank you. We would like young and promising! !