微信小程序实现单选选项卡切换效果

这里展示一个工作中用到的微信小程序的单选选项卡切换效果的制作方法，供大家参考，具体内容如下

效果如图：

wxml:

view class=' item ' wx : for=' { { data } } ' wx : for-item=' item ' wx : for-index=' idx ' data-idx=' { { idx } } ' bind tap=' choose item ' view class=' choose BTN { { idx==current tidxchoose==true '？choosedbtn ' : ' choosenobtn ' } } '/查看文本{ { idx==currentidxchoose==true？text : text two } }/text/view XSS 3360。项目{宽度： 100%；height : 120 rpxbackground : # F5 F5 display : flex flex-direction : row；align-items:居中；保证金-底部： 20 rpx}.项目选择n { width : 60 rpx h8 : 60 rpx边界半径： 50%;左边距left: 40rpx}。项目choosenobtn { background : # c0c 0；}.项目choosedbtn { background : # 87 ceeb；}.项目文本{左边距： 30 rpx}js:

页面({ data: { //让所有的选项都成为未选中状态选择： false，//用来循环展示的数据数据： [1,2,3],文本： '选中了，textTwo: '没选中' }, //点击选项卡时的js chooseItem:函数(e) { //记录上次点击的对象的序号var old dx=this。数据。当前tidx//记录当前点击的对象的序号变化电流tidx=e .电流目标。数据集。idxif(旧dx==当前tidx){ var choose=this。数据。选择；这个。setdata({ current tid x : current tid x，choose:选择})} else { this。setdata({ current tid x : current tid x，选择： true })；} }})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。