小程序标签切换

梦里梦外; 2022-04-04 10:44 207阅读 0赞

<view class='centData-cent'>
      <view wx:for="{
       {menudata}}" data-numb="{
       {index}}" bindtap="menuClick" class="topborder {
       {numbr==index?'bottomborder':''}}">
        <view>
          {
       {item.chinese}}
        </view>
      </view>
    </view>
    <view class='cent'>
      <view wx:if="{
       {item.state}}" data-index="{
       {index}}" wx:for="{
       {data}}">{
       {item.name}}</view>
    </view>

.bottomborder{color: red;}

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        numbr: 0, //切换class的凭证
        menudata: [{
            chinese: '点菜'
          },
          {
            chinese: '评价'
          },
          {
            chinese: '商家'
          }
        ],
        data: [{
            name: '111',
            state: true
          },
          {
            name: '222',
            state: false
          },
          {
            name: '333',
            state: false
          }
        ]
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function() {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function() {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function() {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function() {
    
      },
      // 点击分类菜单,切换class
      menuClick: function(e) {
        var that = this;
        var index = e.currentTarget.dataset.numb;
        console.log("---", index);
        for (var k = 0; k < that.data.data.length; k++) {
          var bbb = "data[" + k + "].state"
          that.setData({
            numbr: e.currentTarget.dataset.numb,
            [bbb]: false
          })
        }
        var aaa = "data[" + index + "].state"
        that.setData({
          numbr: e.currentTarget.dataset.numb,
          [aaa]: true
        })
      }
    })

**如果有帮到你的话，欢迎激励一下作者。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20220404/a6ea4cf553a44034a2d39983d4f6c86c.png