博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序-自定义单项选择器样式
阅读量:631 次
发布时间:2019-03-14

本文共 1212 字,大约阅读时间需要 4 分钟。

效果:

wxml:

{
{item.value}}

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        })    }})

 

你可能感兴趣的文章