微信小程序仿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判断undefined类型示例代码
Feb 10 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
canvas绘制环形进度条
Feb 23 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
JS实现滑动导航效果
Jan 14 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
通过封装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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
JS实现简易留言板增删功能
2020/02/08 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
Python 关于反射和类的特殊成员方法
2017/09/14 Python
python 2.7.14安装图文教程
2018/04/08 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
基于python3实现倒叙字符串
2020/02/18 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
JAVA和C++的区别
2013/10/06 面试题
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
办理暂住证介绍信
2014/01/11 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
Python Django模型详解
2021/10/05 Python
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技