微信小程序常用代码(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时,会触发此函数, })

 

 

微信小程序常用代码(1)——tab切换

 

相关文章