小程序点击菜单栏实现样式动态切换

小程序点击菜单栏背景样式动态切换

前言：今天做一个小程序项目，要做一个菜单栏动态切换的功能，因为这种需求很常见，这次干脆记录一下，帮助别人的同时，自己下次也可以直接照搬使用。

效果截图如下：

就是点击图片上的 商品类型的子菜单 和 排序方式的子菜单的时候 能够实现切换。

wxml代码：

<view class="tabs">
  <view class="tab_title">商品类型：</view>
  <view class="tab">
    <view class="tab_item {{currentIndex === index ? 'active' : ''}}" 
      wx:for="{{leixing}}"
      wx:key="*this"
      bind:tap="changeLeixing" data-index="{{index}}">{{item}}</view>
  </view>
</view>

<view class="tabs">
    <view class="tab_title">排序方式：</view>
   <view class="tab">
    <view class="tab_item {{currentIndex2 === index ? 'active' : ''}}" 
      wx:for="{{paixu}}"
      wx:key="*this"
      bind:tap="changePaixu" data-index="{{index}}">{{item}}</view>
  </view>
</view>

wxss代码：

 .tabs {
  width: 690rpx;
  margin-top: 20rpx;
}
 .tabs .tab_title {
  margin-left: 20rpx;
}
 .tabs .tab {
  display: flex;
  align-items: center;
  width: 100%;
  margin-left: 10rpx;
  margin-top: 15rpx;
}
 .tabs .tab .tab_item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  margin: 0rpx  10rpx;
}
 .tabs .tab .active {
  background-color: #EBB8B6;
  color: #ffffff;
}

*如果你使用的是less 就复制下面这段

  .tabs{
    width: 690rpx;
    margin-top: 20rpx;
    .tab_title{
      margin-left: 20rpx;
    }
    .tab{
      display: flex;
      align-items: center;
      width: 100%;
      margin-left: 10rpx;
      margin-top: 15rpx;
      .tab_item{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10rpx 20rpx;
        border-radius: 20rpx;
        margin: 0rpx  10rpx;
      }
      .active{
        background-color: #EBB8B6;
        color: #ffffff;
      }
    }
  }

js对应的代码

 **首先是小程序js中data里面的变量：**
 
 data: {
    currentIndex:0,  // 类型的索引
    currentIndex2:0,  // 排序的索引
    leixing:["全部","热销","新品"],
    paixu:["默认","价格↑","价格↓","销量"],
  },


  **两个菜单切换的点击函数**(函数名可以自己随便取，但是wxml里面的点击的绑定事件的函数名也要跟着换)
  
    // 切换类型
  changeLeixing(e){
    console.log(e.currentTarget.dataset.index);
    this.setData({
      currentIndex:e.currentTarget.dataset.index
    });
  },

  // 切换排序方式
  changePaixu(e){
    console.log(e.currentTarget.dataset.index);
    this.setData({
      currentIndex2:e.currentTarget.dataset.index
    });
  },

结束语：只要每天有收获，不论多少，那就是进步，加油！！！