uni-app中点击相应按钮变色，其他按钮则不变色

需求：初始化高亮第一个按钮，然后点击其他按钮时，点击的按钮变色，未点击的以及曾点击过的按钮则恢复成未点击的颜色

 

由于第一个按钮是独立写的，不在遍历内，所以要单独写判断，这里我用的Sum这个，代码中就不细写

1 <button  :class="active == Sum ? 'active':'anliu'"   type="default"  @click="all()"><view class="yonghu">总用户</br>{{Sum}}</view></button>
2                         <view  v-for="(item, index) in sequList"  :key="index" >
3                             <button :class="active == item ? 'active':'anliu'"   type="default"   @click="sequ(item,index)"><view class="yonghu1">{{item.communityName}}</br>{{item.sum}}户</view></button>
4                         </view>
1 data() {
2             return {
3                 active:'',
4             }
5 }
 1 // 总社区
 2             all(){
 3                 // console.log('总');
 4              //    console.log(this.Sum);
 5                 this.active = this.Sum;
 6                 
 7                     var tid=this.sequList[0].communityParentId ;
 8                     // console.log(tid);
 9                     // 请求到所有数据
10                     ajax.getshequuser({
11                         userId: this.userId,
12                         
13                         communityId:tid
14                     }).then(res => {
15                         // this.manageManBack(res);
16                         console.log(res)
17                         // console.log(res.data);
18                         this.manageManBack(res);
19                         uni.showToast({
20                             title: '当前显示为全部用户列表!',
21                             icon: 'none',
22                         })
23                     })
24                 
25                 
26                 
27             },
28             // 社区按钮
29             sequ(item,index){
30                 
31                 // console.log(item,index);
32                 this.active = item;
33                 // 社区id
34                 this.sequId=item.communityId;
35                 ajax.getshequuser({
36                     userId: this.userId,
37                     // communityId: cId
38                     communityId:this.sequId
39                 }).then(res => {
40                     this.manageManBack(res);
41                     // this.disabledA=false;
42                     console.log(res);
43                     uni.showToast({
44                         title: '当前显示为'+item.communityName+'列表!',
45                         icon: 'none',
46                     })
47                 })
48             },
 1 .anliu{
 2         width: 165upx;
 3         height: 145upx;
 4         background:#f84201 ;
 5         float: left;
 6         margin-left: 18upx;
 7         margin-bottom: 10upx;
 8         margin-top: 20upx;
 9         font-size: 24upx;
10         color: #ffffff;
11         line-height:40upx;
12         
13     }
14 .active {
15      
16      width: 165upx;
17      height: 145upx;
18      background-color: #aa0000;
19      float: left;
20      margin-left: 18upx;
21      margin-bottom: 10upx;
22      margin-top: 20upx;
23      font-size: 24upx;
24      color: #FFFFFF;
25      line-height:40upx;
26      }

初始化的时候第一个总计按钮高亮的话，则直接将该方法在初始化时调用即可

 

posted @ 2021-01-05 14:04  俩只猫  阅读(4999)  评论(0)  编辑  收藏  举报