微信小程序实现顶部NavTab,这里定义了三个Tab:[Tab1, Tab2, Tab3]。
首先在微信小程序的index.wxml中搭建出布局,里面会涉及数据绑定,for lopp和自定义wcss等相关知识,首先代码是:
<view class="toptab-view flex-display tabflex">
<view class="toptab {{currentNavTab==idx? 'active' : ''}}" wx:for="{{navTab}}" wx:for-index="idx"
wx:for-item="Item" data-idx='{{idx}}" bindtap="tabSwich">
{{Item}}
</view>
</view>
flex-display中定义的是display='flex'
toptab-view中定义了外层view的css样式
tabflex中定义了flex-flow,justify-content和align-items
定义toptab.active样式,当切换另一个tab时,这个tab调用toptab.active样式
在index.js添加toptab逻辑层代码:
Page({
data: {
navTab: ["Tab1", "Tab2", "Tab3"],
currentNavTab: "0"
},
onLoad: function() {
},
tabSwich: function(e) {
this.setData({
currentNavTab: e.currentTarget.dataset.idx
});
}
})
tabSwitch通过bindtab定义数据绑定
很简短的demo,大家可以搜寻下github上关于知乎模仿的小程序,非常好的练手demo