微信小程序开发-选项卡功能

微信小程序开发中经常用到选项卡，微信没有自带的选项卡，不过可以用其他的功能组合成选项卡，非常简单。

image.png

image.png

需要用到的功能：

1. 标签绑定数据及获取

data-current=”” 绑定数据到标签中，获取：e.currentTarget.dataset.current;//获取到绑定的数据

2.catchtap 添加事件。

3.通过js数据值，判断需要显示隐藏或者是class样式

class='{{menuTapCurrent==”0″?”btn_selected”:””}}’
hidden=”{{menuTapCurrent!=’0′}}”

原理很简单，设置一个数据，初始值给0，也就是选中第一个，如：选项卡三个按钮三个页面，数值设置0 、1、2 ；然后点击的时候获取标签中绑定的是几，然后对应设置数据为几，标签中样式和显示隐藏根据数据判断，绑定好。

// js
Page({
    data:{
        menuTapCurrent:0
    },
    // 点击按钮选项卡切换
    menuTap: function (e) {
        var current = e.currentTarget.dataset.current;//获取到绑定的数据
        //改变menuTapCurrent的值为当前选中的menu所绑定的数据
        this.setData({
            menuTapCurrent: current
        });
    }
});

//wxml
<view class="center_busLine">
    <!--按钮-->
    <view class="_header">
      <view class='{{menuTapCurrent=="0"?"btn_selected":""}}' data-current="0" catchtap="menuTap">
        <text>推荐线路</text>
      </view>
      <view class='{{menuTapCurrent=="1"?"btn_selected":""}}' data-current="1" catchtap="menuTap">
        <text>收藏</text>
      </view>
      <view class='{{menuTapCurrent=="2"?"btn_selected":""}}' data-current="2" catchtap="menuTap">
        <text>历史</text>
      </view>
    </view>
    <!--内容，可以选择包一起，我是直接少包了一层-->
    <view class="content" hidden="{{menuTapCurrent!='0'}}">
      
    </view>
    <view class="content" hidden="{{menuTapCurrent!='1'}}">
      
    </view>
    <view class="content" hidden="{{menuTapCurrent!='2'}}">
      
    </view>
</view>

作者：虚幻的锈色
链接：https://www.jianshu.com/p/f4bb7821db65
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。