微信小程序仿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 相关文章推荐
Javascript 构造函数详解
Oct 22 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 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 mssql 时间格式问题
2009/01/13 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
python 读取二进制 显示图片案例
2020/04/24 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
数控技术应用个人求职信范文
2014/02/03 职场文书
小城镇建设汇报材料
2014/08/16 职场文书
Golang二维数组的使用方式
2021/05/28 Golang
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python