小程序点击菜单栏背景样式动态切换
前言：今天做一个小程序项目，要做一个菜单栏动态切换的功能，因为这种需求很常见，这次干脆记录一下，帮助别人的同时，自己下次也可以直接照搬使用。
效果截图如下：
就是点击图片上的 商品类型的子菜单 和 排序方式的子菜单的时候 能够实现切换。
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});},结束语：只要每天有收获，不论多少，那就是进步，加油！！！
)
)
