最近一个人负责公司的微信小程序项目,项目做完了,给大家分享一点开发中遇到的坑已经常用的组件,话不多说,今天分享TAB选项卡!
1、先看效果:
2、wxml代码
<view class='container'> <view class='tabbox'> <block wx:for="{{tab}}"> <navigator hover-class='none' class="{{num==index?'selected':''}}" bindtap='clickLabel' data-id='{{item.id}}' data-itype="{{item.itype}}" data-index="{{index}}">{{item.tabname}}</navigator> </block> </view> <view class='tabcontent'> <view wx:if="{{itype==0}}">全部</view> <view wx:if="{{itype==1}}">好评</view> <view wx:if="{{itype==2}}">有图</view> <view wx:if="{{itype==3}}">差评</view> </view></view>复制代码
wx:for 遍历data数据里面的tab选项;
wx:if 判断传递过来itype的参数,来展示相应的内容;
data-itype data-index 是我自己写的测试数据定义的当前元素的类型、下标值;
bindtap 绑定点击事件
num==index?'selected':''点击添加一个selected 的class
3、
Page({
/** * 页面的初始数据 */ data: { tab: [ {'id':0,'itype':0,'tabname':'全部'}, {'id':1,'itype':1,'tabname':'好评'}, {'id':2,'itype':2,'tabname':'有图'}, {'id':3,'itype':3,'tabname':'差评'} ], num:0, itype:0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) {}, clickLabel: function (e) { var that = this; let index = e.currentTarget.dataset.index;
<点击获取当前元素下的下标> let num = e.currentTarget.dataset.index;
<点击获取当前元素下的num>
let itype = e.currentTarget.dataset.itype;
<点击获取当前元素下的itype>
this.curIndex = e.currentTarget.dataset.index;
<将获取到的值赋值给data,覆盖里面的 num iteype 已达到点击传参的效果> this.setData({ curIndex: index, num: index, itype: itype }) }, /*** 生命周期函数--监听页面初次渲染完成*/ onReady: function() { }, /** * 生命周期函数--监听页面显示 */ onShow: function() {}, /** * 生命周期函数--监听页面隐藏 */ onHide: function() {}, /** * 生命周期函数--监听页面卸载 */ onUnload: function() {}, /*** 页面相关事件处理函数--监听用户下拉动作*/ onPullDownRefresh: function() {}, /*** 页面上拉触底事件的处理函数 */ onReachBottom: function() {}, /*** 用户点击右上角分享*/ onShareAppMessage: function() { },})
复制代码
tab:是json的数据格式,从后台后去
num ,itype初始值默认为0,首次页面加载在onload里面执行