小程序切换效果
wxml
<view class="satuan"> <view class="sadan" bindtap="xin" style="border-color:{{xin}};">新人团</view> <view class="sadan" bindtap="pu" style="border-color:{{pu}};">普通团</view> <view class="sadan" bindtap="chao" style="border-color:{{chao}};">超级团</view> </view>
wxss
.satuan{ height:100rpx; width:100%; background:#F32C39; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-around; } .satuan .sadan{ height:100rpx; line-height:100rpx; font-size:30rpx; color:#fff; border-bottom:4rpx solid #fff; }
wxjs
data: {
xin: "#fff",
pu: "#F32C39",
chao:"#F32C39"
},
xin:function(){
this.setData({
xin: "#fff",
pu: "#F32C39",
chao: "#F32C39"
})
},
pu:function(){
this.setData({
xin: "#F32C39",
pu: "#fff",
chao: "#F32C39"
})
},
chao:function(){
this.setData({
xin: "#F32C39",
pu: "#F32C39",
chao: "#fff"
})
},