• 微信小程序button选中改样式-实现单选/多选


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

    红色为选中状态

    单选

    多选

    ①wxss

    /* pages/button-select/button-select.wxss */
    
    .button_container{
      display: flex;
      flex-direction: row;
      justify-content: space-around
    }
    /* 按钮未选中 */
    .normal_button{
      background: greenyellow
    }
    /* 按钮选中 */
    .checked_button{
      background: red;
      color: white
      
    }
    

    ②wxm

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

    <!--pages/button-select/button-select.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='radioButtonTap'>{{item.name}}</button>
      </block>
    </view>
    <text>{{msg}}</text>
    

    ③js

    Page({...})中填充按钮数据

    data: {
        buttons: [{ id: 1, name: '银色' }, { id: 2, name: '白色' }, { id: 3, name: '黑色' }],
        msg:'',
      },
    

    默认使第一个按钮被选中Page({...})

    onLoad: function (options) {
        this.data.buttons[0].checked = true;
        this.setData({
          buttons: this.data.buttons,
        })
      },
    

    Page({...})中添加事件监听方法(单选)

    /**
     * 事件监听,实现单选效果
     * e是获取e.currentTarget.dataset.id所以是必备的,跟前端的data-id获取的方式差不多
     */
    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
        })
      },
    

    Page({...})中添加事件监听方法(多选)

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

      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
        })
        
      },
  • 相关阅读:
    vue项目中引用spreadjs方法
    使用Element的table合并单元格的问题(合并行)
    卸载mysql
    mac 下安装mySQL
    react中界面跳转 A界面跳B界面,返回A界面,A界面状态保持不变 localStorage方法
    react点击弹出带出值和点击跳转页面带出值
    ajax优缺点
    vue项目console.log报错
    性能优化
    对象生命周期
  • 原文地址:https://www.cnblogs.com/lifan1998/p/10284198.html
Copyright © 2020-2023  润新知