微信小程序仿RadioGroup改变样式的处理方案


Posted in Javascript onJuly 13, 2018

最开始想改变Radio的样式,但是发现自己写比较方便就直接写了一个。

先上效果:

微信小程序仿RadioGroup改变样式的处理方案

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
})
}
})

总结

以上所述是小编给大家介绍的微信小程序仿RadioGroup改变样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS日历 推荐
Dec 03 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
vue-test-utils初使用详解
May 23 Javascript
简单了解前端渐进式框架VUE
Jul 20 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
通过封装scroll.js 获取滚动条的值
Jul 13 #Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 #Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 #Javascript
vue实现组件之间传值功能示例
Jul 13 #Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 #Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 #jQuery
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 #Javascript
You might like
用PHP和ACCESS写聊天室(六)
2006/10/09 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
php实现对象克隆的方法
2015/06/20 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
ES6 十大特性简介
2020/12/09 Javascript
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
python groupby 函数 as_index详解
2019/12/16 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
波兰购物网站:MALL.PL
2019/05/01 全球购物
暑期实践思想汇报
2014/01/06 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
人事部专员岗位职责
2014/03/04 职场文书
八年级英语教学反思
2016/02/15 职场文书
导游词之江西赣州
2019/10/15 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android