码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2020-01-11 13:25:57      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:一个   pre   set   list   切换   class   div   job   view   

 
 
 
 <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切换

标签:一个   pre   set   list   切换   class   div   job   view   

原文地址:https://www.cnblogs.com/zhilili/p/12179541.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!