不懂微信小程序怎么实现单选选项卡切换效果？？其实想解决这个问题也不难，下面让小编带着大家一起学习怎么去解决，希望大家阅读完这篇文章后大所收获。

效果如图：

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&#63;'choosedbtn':'choosenobtn'}}"></view> <text>{{idx==currentidx&&choose==true&#63;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 }); } }})

感谢你能够认真阅读完这篇文章，希望小编分享微信小程序怎么实现单选选项卡切换效果？内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!