小程序实现多button单选/多选

左手喵子

已于 2024-02-07 12:33:40 修改

阅读量421

点赞数 3

分类专栏：微信小程序文章标签：小程序 java apache

于 2024-02-07 12:30:57 首次发布

本文链接：https://blog.csdn.net/weixin_42017221/article/details/136067849

版权

微信小程序专栏收录该内容

39 篇文章 0 订阅

订阅专栏

本文介绍了如何在微信小程序中利用wxml的三元运算符实现按钮选中状态的切换，并展示了如何在wxss中定义不同状态下的样式，以及对应的JavaScript逻辑处理单选和多选功能。

摘要由CSDN通过智能技术生成

单选

多选

①wxml--样式选中改变是通过三元运算符实现的

  <view class='button_container'>
    <block wx:for="{{buttons}}" wx:key="buttons">
      <button class='{{item.checked?"checked_button":"normal_button"}}' data-id='{{item.id}}' bindtap='checkButtonTap'>{{item.checked}}11</button>
    </block>
  </view>
  <text>{{msg}}</text>

②wxss

/**index.wxss**/
page {
height: 100vh;
display: flex;
flex-direction: column;
}
.button_container{
display: flex;
flex-direction: row;
justify-content: space-around
}
/* 按钮未选中 */
.normal_button{
background: greenyellow
}
/* 按钮选中 */
.checked_button{
background: red;
color: white
}

③js

单选--记得在wxml中修改绑定方法bindtap='radioButtonTap'

多选--记得在wxml中修改绑定方法bindtap='checkButtonTap'

Page({
  data: {
    buttons: [{ id: 1, name: '银色',checked:false }, { id: 2, name: '白色',checked:false }, { id: 3, name: '黑色',checked:false }],
    msg:'',
  },
  onLoad: function (options) {
    console.log(options)
    this.data.buttons[0].checked=true;
    this.setData({
      buttons: this.data.buttons,
    })
    console.log(this.data.buttons)
  },

  // 单选
  radioButtonTap: function (e) {
    console.log(e)
    let id = e.currentTarget.dataset.id
    console.log(id)
    for (let i = 0; i < this.data.buttons.length; i++) {
      if (this.data.buttons[i].id == id) {
        //当前点击的位置为true即选中
        this.data.buttons[i].checked = true;
      }
      else {
        //其他的位置为false
        this.data.buttons[i].checked = false;
      }
    }
    this.setData({
      buttons: this.data.buttons,
      msg: "id:"+id
    })
  },
  

  // 多选
  checkButtonTap:function(e){
    console.log(e)
    let id = e.currentTarget.dataset.id
    console.log(id)
    for (let i = 0; i < this.data.buttons.length; i++) {
      if (this.data.buttons[i].id == id) {
        if (this.data.buttons[i].checked == true) {
          this.data.buttons[i].checked = false;
        } else {
          this.data.buttons[i].checked = true;
        }
      }
    }
   this.setData({
     buttons: this.data.buttons,
     msg: "id:"+id
    })
  },
})