Sow nothing reap nothing

微信小程序button点击多选/单选简单实现

已有9,587次关注

微信小程序button点击多选/单选简单实现:wxss定义小程序按钮点击选中与未选中状态下的样式,多个button按钮使用wx:for展示,通过点击改变原数据下自定义的选择字段true/false来实现选中状态。
效果截图
微信小程序button点击多选/单选简单实现.gif

1、WXML代码:

<button wx:for="{{diseaseList}}" wx:key="*this" data-index="{{index}}" class="{{item.checked ? 'active' : ''}}" bindtap="diseaseSwitch">{{item.diseaseName}}</button>

2、WXSS代码:

button{border-radius:40rpx;text-align:left;font-size:30rpx;background-color:rgba(255,255,255,1);border:2rpx solid #caccce;color:#8a8e99;padding:0rpx 30rpx;margin:0rpx 10rpx 10rpx 0rpx}
button::after{border:none}
button.active{background-color:#009ee6;border:2rpx solid #009ee6;color:#fff}

3、JS代码:

Page({

  /**
   * 页面的初始数据
   */
  data: {

    diseaseList: [
        {diseaseCode: "S90.8", diseaseName: "踝和足的其他浅表损伤", checked: false},
        {diseaseCode: "R05", diseaseName: "咳嗽", checked: false},
        {diseaseCode: "P29.3", diseaseName: "胎儿循环存留", checked: false},
        {diseaseCode: "J39.9", diseaseName: "上呼吸道疾病,未特指", checked: false},
        {diseaseCode: "J31.0", diseaseName: "慢性鼻炎", checked: false},
        {diseaseCode: "A37.1", diseaseName: "由于副百日咳博德特杆菌引起的百日咳", checked: false},
        {diseaseCode: "N32.1", diseaseName: "膀胱肠瘘", checked: false},
        {diseaseCode: "C17.3", diseaseName: "麦克尔憩室", checked: false},
        {diseaseCode: "A16.9", diseaseName: "未特指的呼吸道结核病,未提及细菌学或组织学的证实", checked: false},
        {diseaseCode: "A16.1", diseaseName: "肺结核病,未做细菌学和组织学检查", checked: false}
    ]
    
  },

  /**
   * 疾病选择切换 
   */
  diseaseSwitch: function (options) {
    let that = this;
    // 按钮索引
    var index = options.currentTarget.dataset.index;
    // 索引对应内容
    var item = that.data.diseaseList[index];
    // 选中,未选中状态切换
    item.checked = !item.checked;
    // 更新
    that.setData({
      diseaseList: that.data.diseaseList
    });
  }

})

已自动关闭评论