微信小程序点击顶部导航栏切换样式

Posted 2020-11-29 leahtao的前端积累

类似这样的效果

 

 

 

 

 

1 <view class=\'helpCateList\'>
2     <!-- 类别 -->
3     <scroll-view class=\'scroll-view\' scroll-x="true">
4       <view class="item-content"  wx:key="id" wx:for="{{helpCateList}}" wx:for-item="item">
5         <view class="content {{currentTab == item.itemsId ? \'active\' : \'\'}}" data-itemsId=\'{{item.itemsId}}\' bindtap=\'cateChange\' >{{item.itemsName}}  </view>
6       </view>
7     </scroll-view>
8  </view>

 1 .helpDisList .content{
 2   position: relative;
 3   width: 710rpx;
 4   border-radius: 5rpx;
 5 
 6 }
 7 .active{ //当点击的时候添加这个样式
 8   /* border-bottom: 4rpx solid rgb(252, 186, 7); */
 9   color:rgb(252, 186, 7);
10 }

 1 Page({
 2   data:{
 3 
 4     helpCateList:[ //数据从后台请求回来赋值
 5       // { id: "1", desc: "康复医疗" },
 6       // { id: "2", desc: "教育" },
 7       // { id: "3", desc: "就业" },
 8       // { id: "4", desc: "扶贫" },
 9       // { id: "5", desc: "职业培训" },
10       // { id: "6", desc: "社会保障" },
11       // { id: "7", desc: "文化生活" },
12     ],
13     currentTab: 1,
14   },
15   cateChange(e) {
16     console.log(e)
17     let that = this
18     that.setData({
19 
20       currentTab: e.currentTarget.dataset.itemsid, //这个必须要
21 
22     })
23   },