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


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 相关文章推荐
JS 字符串连接[性能比较]
May 10 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
javascript淡入淡出效果的实现思路
Mar 31 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
javascript实现拖放效果
Dec 16 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
页面点击小红心js实现代码
May 26 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 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对象相互引用的内存溢出实例分析
2014/08/28 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
自己使用总结Python程序代码片段
2015/06/02 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
pycharm远程调试openstack代码
2017/11/21 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
Python中extend和append的区别讲解
2019/01/24 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
python版百度语音识别功能
2019/07/09 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
python中字典增加和删除使用方法
2020/09/30 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
代码中finally中的代码会不会执行
2012/02/06 面试题