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


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 相关文章推荐
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
JS验证字符串功能
Feb 22 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
js事件触发操作实例分析
Jun 21 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 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实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
JavaScript 基本概念
2015/01/20 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
理解javascript异步编程
2016/01/27 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
Python Tkinter基础控件用法
2014/09/03 Python
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Python中的函数作用域
2018/05/07 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
python向图片里添加文字
2019/11/26 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
个人评价范文分享
2014/01/11 职场文书
大学生秋游活动方案
2014/02/17 职场文书
优秀应届毕业生推荐信
2014/02/18 职场文书
行政专员的岗位职责
2014/03/10 职场文书
毕业证代领委托书
2014/09/26 职场文书
防火标语大全
2014/10/06 职场文书
国庆阅兵观后感
2015/06/15 职场文书
保险公司增员口号
2015/12/25 职场文书