這里展示一個工作中用到的微信小程序的單選選項卡切換效果的制作方法，供大家參考，具體內容如下

效果如圖：

wxml:

<view class="item" wx:for="{{data}}" wx:for-item="item" wx:for-index="idx" data-idx="{{idx}}" bindtap="chooseItem">  <view class="choosebtn {{idx==currentidx&&choose==true?'choosedbtn':'choosenobtn'}}"></view>  <text>{{idx==currentidx&&choose==true?text:textTwo}}</text></view>

wxss:

.item { width: 100%; height: 120rpx; background: #f5f5f5; display: flex; flex-direction: row; align-items: center; margin-bottom: 20rpx;}.item .choosebtn { width: 60rpx; height: 60rpx; border-radius: 50%; margin-left: 40rpx;}.item .choosenobtn { background: #c0c0c0;}.item .choosedbtn { background: #87ceeb;}.item text { margin-left: 30rpx;}

js:

Page({ data: {  // 讓所有的選項都成為未選中狀態  choose: false,  // 用來循環展示的數據  data: [1, 2, 3],  text: '選中了',  textTwo: '沒選中' }, // 點擊選項卡時的js chooseItem: function (e) {  //記錄上次點擊的對象的序號  var oldidx = this.data.currentidx;  //記錄當前點擊的對象的序號  var currentidx = e.currentTarget.dataset.idx;  if (oldidx == currentidx) {   var choose = this.data.choose;   this.setData({    currentidx: currentidx,    choose: !choose   })  } else {   this.setData({    currentidx: currentidx,    choose: true   });  } }})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。