您的位置：首页 > 移动开发 > 微信开发

微信小程序自定义单项选择器样式

2019-07-25 11:48 1401 查看

本文实例为大家分享了微信小程序自定义单项选择器样式的具体代码，供大家参考，具体内容如下

效果：

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

})

}

})

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 微信小程序选择器

相关文章推荐

新的分享

章节导航