4 月 13, 2018 #APP应用, #app开发公司, #app开发定制, #小程序制作, #小程序开发, #小程序开发教程, #小程序开发编程, #小程序开发费用, #小程序教程, #开发选项卡功能代码, #微信小程序开发

文章目录

1. 标签绑定数据及获取
2.catchtap 添加事件。
3.通过js数据值，判断需要显示隐藏或者是class样式

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

需要用到的功能：

1. 标签绑定数据及获取

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

2.catchtap 添加事件。

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

class='{{menuTapCurrent=="0"?"btn_selected":""}}'
Shopfadden="{{menuTapCurrent!='0'}}"

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

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

//wxml

    
    
      
        推荐线路
      
      
        收藏
      
      
        历史