微信小程序自定义单项选择器样式
更新时间：2019年07月25日 11:48:43 作者：MarieDreamer
这篇文章主要为大家详细介绍了微信小程序自定义单项选择器样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序自定义单项选择器样式的具体代码，供大家参考，具体内容如下
效果：
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
})
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
由于现在的很多用户的分辨率问题，导致很多广告会遮挡内容或者对于不同分辨率的用户不同的css样式，就可以参考下面的代码2013-07-07
用来计算两个整数的百分比值的代码，需要的可以看看。2009-12-12
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
这篇文章主要是对JavaScript中的常见问题解决方法(乱码,IE缓存,代理)进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所 帮助2013-11-11
今天小编就为大家分享一篇在iFrame子页面里实现模态框的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要给大家介绍了关于echarts实现晶体球面投影的相关资料，文中介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要介绍了JavaScript扩展运算符的学习及应用详情(ES6),扩展运算符是ES6新增的一种运算符，他可以帮助我们简化代码，简化操作，具体相关知识感兴趣的小伙伴可以查看下面文章的简单介绍2022-08-08
新增加的内容是如何将div的scrollbar自动移动最下面
在做动态增长的div时,一般都是将内容append到div的最下面,但这会带来一个问题,那就是新增加的内容会被遮在最下面,具体实现如下,感兴趣的朋友可以参考下2014-01-01
下面小编就为大家带来一篇浅谈js的html元素的父节点,子节点。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
关于layui 实现点击按钮添加一行(方法渲染创建的table)
今天小编就为大家分享一篇关于layui 实现点击按钮添加一行(方法渲染创建的table)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了bootstrap table合并行数据并居中对齐效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
最新评论