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


Posted in Javascript onJune 19, 2020

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

效果如图:

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

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
  });
 }
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现的自定义的对话框的实现代码
Mar 21 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
vue 验证两次输入的密码是否一致的方法示例
Sep 29 Javascript
一秒学会微信小程序制作table表格
Feb 14 #Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 #Javascript
微信小程序实现简易table表格
Jun 19 #Javascript
微信小程序制作表格的方法
Feb 14 #Javascript
手把手带你封装一个vue component第三方库
Feb 14 #Javascript
微信小程序实现简单表格
Feb 14 #Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 #Javascript
You might like
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
ElementUI之Message功能拓展详解
2019/10/18 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
python爬取指定微信公众号文章
2018/12/20 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
python3 logging日志封装实例
2020/04/08 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
课程设计心得体会
2013/12/28 职场文书
协议书与合同的区别
2014/04/18 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏