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


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 随机数产生6位数字
May 13 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
javascript中this的四种用法
May 11 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
微信小程序的线程架构【推荐】
May 14 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 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 list()函数的详解
2013/06/05 PHP
详解php的socket通信
2015/08/11 PHP
10款实用的PHP开源工具
2015/10/23 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
python处理中文编码和判断编码示例
2014/02/26 Python
浅述python中深浅拷贝原理
2018/09/18 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
python 自动识别并连接串口的实现
2021/01/19 Python
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
小学毕业感言50字
2014/02/16 职场文书
旷课检讨书范文
2014/10/30 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
中标通知书格式
2015/04/17 职场文书
高中运动会前导词
2015/07/20 职场文书
golang正则之命名分组方式
2021/04/25 Golang
详解Python中下划线的5种含义
2021/07/15 Python
Python内置数据结构列表与元组示例详解
2021/08/04 Python