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


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 相关文章推荐
Jquery常用技巧收集整理篇
Nov 14 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
javascript基础知识讲解
Jan 11 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
一秒学会微信小程序制作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
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
php实现的RSS生成类实例
2015/04/23 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
js如何找出字符串中的最长回文串
2018/06/04 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
python使用正则表达式替换匹配成功的组
2017/11/17 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
python 2.7.14安装图文教程
2018/04/08 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
授权委托书(完整版)
2014/09/10 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
入党转正申请报告
2015/05/15 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
javascript canvas实现雨滴效果
2021/06/09 Javascript
Python中字符串对象语法分享
2022/02/24 Python