微信小程序仿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 相关文章推荐
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
开启BootStrap学习之旅
May 04 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
通过封装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接口和抽象类使用示例详解
2014/03/02 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
彻底理解Python中的yield关键字
2019/04/01 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
2014年上半年工作自我评价
2014/01/18 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
挂科检讨书范文
2014/02/20 职场文书
会计学专业求职信
2014/07/17 职场文书
水知道答案观后感
2015/06/08 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
Python绘制分类图的方法
2021/04/20 Python