类似这样的效果
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 },