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

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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

发表评论

邮箱地址不会被公开。 必填项已用*标注