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


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 相关文章推荐
用javascript自动显示最后更新时间
Mar 15 Javascript
js 加载时自动调整图片大小
May 28 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
angular.bind使用心得
Oct 26 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
vue 获取url里参数的两种方法小结
Nov 12 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常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
php面向对象值单例模式
2016/05/03 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
JavaScript 变量基础知识
2009/11/07 Javascript
JS上传图片预览插件制作(兼容到IE6)
2016/08/07 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
Nodejs libuv运行原理详解
2019/08/21 NodeJs
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
Python 从列表中取值和取索引的方法
2018/12/25 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
应急处置方案
2014/06/16 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
个人先进事迹材料
2014/12/29 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫