小程序标签切换-蒲公英云

小程序标签切换

梦里梦外; 2022-04-04 10:44 261阅读 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
    })
  }
})