微信小程序实现单选选项卡切换效果
更新时间:2020年06月19日 14:48:48 作者:anLazyAnt
这篇文章主要为大家详细介绍了微信小程序实现单选选项卡切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这里展示一个工作中用到的微信小程序的单选选项卡切换效果的制作方法,供大家参考,具体内容如下
效果如图:
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 }); } } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
promise结合requestAnimationFrame用法示例
这篇文章主要为大家介绍了promise结合requestAnimationFrame用法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-11-11关于IE中getElementsByClassName不能用的问题解决方法
今天使用getElementsByClassName写了段小程序,在IE6、8中测试的时候就出现问题了,浏览器报错,经搜索找到了一个比较好的方法,是个老外写的一个方法2013-08-08Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
这篇文章主要介绍了Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理),需要的朋友可以参考下2015-01-01JavaScript中创建字典对象(dictionary)实例
这篇文章主要介绍了JavaScript中创建字典对象(dictionary)实例,本文直接给出了实现的源码,并给出了使用示例,需要的朋友可以参考下2015-03-03
最新评论