本文共 970 字，大约阅读时间需要 3 分钟。

微信小程序切换标签改变样式

wxml

   
       
    
     A
        
    
     B
        
    
     C
    
   
   
       
            
                 
      
       {{item}}
              
         
    
   

wxss

.swiper-tab {  display: flex;  flex-direction: row;  line-height: 60rpx;  border-bottom: 2rpx solid #777;}.tab-item {  width: 33.3%;  text-align: center;  font-size: 15px;  color: rgb(235, 135, 135);}.swiper {  width: 100%;  font-size: 100rpx;  height: 1140rpx;  background: #dfdfdf;}.active {  color: blue;  border-bottom: 5rpx solid blue;}

js

Page({  data: {    // tab切换    currentTab: 0,    tabs: ["A", "B", "C"],  },  swichNav: function (e) {    // console.log(e);    var that = this;    if (this.data.currentTab === e.target.dataset.current) {      return false;    } else {      that.setData({        currentTab: e.target.dataset.current,      });    }  },  swiperChange: function (e) {    // console.log(e);    this.setData({      currentTab: e.detail.current,    });  },});

The_End