微信小程序NavTab简单应用

微信小程序实现顶部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