navtab触底 小程序_微信小程序NavTab简单应用

微信小程序实现顶部NavTab，这里定义了三个Tab：[Tab1, Tab2, Tab3]。

首先在微信小程序的index.wxml中搭建出布局，里面会涉及数据绑定，for lopp和自定义wcss等相关知识，首先代码是：

wx:for-item="Item" data-idx='{{idx}}" bindtap="tabSwich">

{{Item}}

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