微信小程序自定义单项选择器样式


Posted in Javascript onJuly 25, 2019

本文实例为大家分享了微信小程序自定义单项选择器样式的具体代码,供大家参考,具体内容如下

效果:

微信小程序自定义单项选择器样式

wxml:

<view bindchange="radioChange">
 
 <view class='list_item' wx:for="{{radioValues}}" data-index="{{index}}" bindtap='radioChange' style="{{index == radioValues.length-1?'border-bottom:0':''}}">
  <text style='color:rgb(96,96,96)'>{{item.value}}</text> 
  <view wx:if="{{item.selected}}" class='item'> 
   <view style='width:20rpx;height:20rpx;background-color:rgb(144,144,144);border-radius:100%;'></view> 
  </view>
  <view wx:else class='item'></view>
 </view>
 
</view>

wcss:

.list_item{
 
 display: flex;
 
 justify-content: space-between;
 align-items: center; 
 margin:0 25rpx; 
 width:700rpx;
 font-size: 30rpx; 
 color: rgb(79,79,79); 
 padding: 28rpx 0;
 border-bottom:1px solid rgb(209,209,209);
 
}
 
.item{
 
 width: 28rpx; 
 height: 28rpx; 
 border: 2px solid rgb(144,144,144); 
 border-radius: 100%; 
 display: flex; 
 align-items: center; 
 justify-content: center;
 
}

js:

Page({
 
 
 data: {
 
  radioValues: [
 
   { 'value': '未付款订单', 'selected': false }, 
   { 'value': '进行中的订单', 'selected': false }, 
   { 'value': '完成了的订单', 'selected': false }, 
   { 'value': '所有订单', 'selected': true },
 
  ]
 
 },
 
 onLoad: function (options) { 
 },
 
 
 radioChange:function(e){ 
  var index = e.currentTarget.dataset.index;
  var arr = this.data.radioValues;
   for (var v in arr){
   if (v == index){
 
    arr[v].selected = true;
 
   }else{
 
    arr[v].selected = false;
 
   }
 
  }
 
  this.setData({ 
   radioValues:arr
 
  })
 
 }
 
 
})

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

Javascript 相关文章推荐
jquery 批量上传图片实现代码
Jan 28 Javascript
JavaScript 题型问答有答案参考
Feb 17 Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 #Javascript
微信小程序实现原生步骤条
Jul 25 #Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 #Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 #Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 #Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 #Javascript
微信小程序实现收货地址左滑删除
Nov 18 #Javascript
You might like
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
PHP基本语法实例总结
2016/09/09 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
javascript 精粹笔记
2010/05/09 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
python使用配置文件过程详解
2019/12/28 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
社区母亲节活动记录
2014/03/06 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
总经理检讨书
2014/09/15 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
医德医风个人总结
2015/02/28 职场文书
2016新年感言
2015/08/03 职场文书
在Python中如何使用yield
2021/06/07 Python
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers