本文共 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        })    }})