微信小程序-单选按钮实现

先看一下功能实现

index.js

 data: {
    
    parameter: [
      { name: '1', value: '派车　　　　' },
      { name: '2', value: '司机无法定位'},
      { name: '3', value: '抵达装货　　' },
      { name: '4', value: '在途运输　　' },
      { name: '5', value: '抵达卸货　　' },
      { name: '6', value: '付款问题　　' },
    ]
  },

// 参数点击响应事件
  parameterTap: function (e) {
    var that = this
    var this_checked = e.currentTarget.dataset.id
    var parameterList = this.data.parameter//获取Json数组
    for (var i = 0; i < parameterList.length; i++) {
      if (parameterList[i].name == this_checked) {
        parameterList[i].checked = true;//当前点击的位置为true即选中
        this.setData({ checkboxgroupList: this_checked })
      }
      else {
        parameterList[i].checked = false;//其他的位置为false
      }
    }
    that.setData({
      parameter: parameterList
    })
  },

 index.wxml

 <view class="checkboxgroup">
     <block wx:for="{{parameter}}" wx:key="parameter">
        <text class='parameter-info text-over {{item.checked?"checked_parameter":""}}' data-id='{{item.name}}' bindtap='parameterTap'>{{item.value}}</text>
    </block>

index.wxss 

.checkboxgroup{
  margin-left:-14%;
}
.parameter-info{
  padding:6px 16px;
  font-size:14px;
  line-height:1.5285714300000004;
  border:1px solid transparent;
  border-radius:4px;
  background-color:#F0F0F0;
  display:inline-block;
  width:168rpx;
  height:39rpx;
  margin-top:26rpx;
  margin-left:171rpx;
}
.checked_parameter{
	color: #eea236;
}

感谢博主: https://blog.csdn.net/qq_38209578/article/details/78810981.但是博主没写样式，所以我自己写了样式。