微信小程序常用代碼（1）——tab切換

 

 

 

 <view class="font-bold tab-content">
      <!-- 循環列表 -->
      <block wx:for="{{jobList}}" wx:key="{{item.deptId}}">
           <!-- 點擊時會觸發事件viewDeptTwo ,並且攜帶數據(data-id)-->
           <!-- 當點擊時候會觸發函數，將標識符deptId轉為item.deptId中的值，只有當標識符deptId==item.deptId時，才會顯示on的樣式 -->
           <view wx:if="{{item.deptId==1}}" class="{{item.deptId==deptId?'on':''}}" data-id="{{item.deptId}} " bindtap="viewDeptTwo">
              {{item.deptName}}
           </view>
      </block>
</view>
<!--當deptId為1時候顯示當前的模板-->

　<view wx:if="{{deptId ==1}}">

 

　</view>

　

　<view wx:if="{{deptId ==2}}">

 

　</view>

　　

　<view wx:if="{{deptId ==2}}">

 

　</view>

JS頁面中 data中的數據

data: {
    jobList: [
      {
        deptId: 1,
        deptName: '院校實習'
      },
      {
        deptId: 2,
        deptName: '兼職'
      },
      {
        deptId: 3,
        deptName: '全職'
      }
    ],
    deptId:1
  },

 JS頁面中的函數

 

viewDeptTwo: function (e) {
    this.setData({
      deptId: e.currentTarget.dataset.id     //當點擊一個tab時，會觸發此函數，
    })