lok_006 2021-10-26 16:51 采纳率: 94.4%
浏览 37
已结题

小程序如何实现多选按钮选中情况下展示图片

wxml


<view class='button_container'>
  <block wx:for="{{buttons}}" wx:key="buttons">
  <button style='width: 250rpx;height: 300rpx;' class='{{item.checked?"checked_button":"normal_button"}}' data-id='{{item.id}}' bindtap='checkButtonTap'>{{item.name}}</button>
  </block>
</view>

wxss

.button_container{
  display: flex;
  flex-direction: row;
  justify-content: space-around
}
/* 按钮未选中 */
.normal_button{
  background: rgb(255, 255, 255)
}
/* 按钮选中 */
.checked_button{
  background: rgb(240, 239, 239);
  color: white
  
}

js


Page({
  data: {
    buttons: [{ id: 1, name: '珍珠' }, { id: 2, name: '红豆' }, { id: 3, name: '寒天' }],
    msg:'',
  },
  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
    })
    
  },
})

  • 写回答

1条回答 默认 最新

  • 普通网友 2021-10-26 17:38
    关注

    你的思路已经很清晰了,

    只不过是需要有人帮你解决bug

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 11月4日
  • 已采纳回答 10月27日
  • 修改了问题 10月26日
  • 创建了问题 10月26日

悬赏问题

  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常
  • ¥15 关于风控系统,如何去选择