您好,小程序模板欢迎您。
小程序模板
当前位置 : 首页> 小程序教程> 微信小程序点击同一个增加背景色,再次点击取消背景色

微信小程序点击同一个增加背景色,再次点击取消背景色

以下是使用 setData 和 tap 事件实现点击同一个元素切换背景色的示例代码:


  {{ item.text }}
Page({
  data: {
    list: [
      { id: 1, text: '选项1', selected: false },
      { id: 2, text: '选项2', selected: false },
      { id: 3, text: '选项3', selected: false },
    ],
  },

  // 点击事件
  onTap(e) {
    const { index } = e.currentTarget.dataset
    const item = this.data.list[index]

    // 切换选中状态
    item.selected = !item.selected

    // 更新数据
    this.setData({ list: this.data.list })
  },
})

在上面的示例中,list 数组中的每个元素都有一个 selected 属性,表示该元素是否被选中。在 onTap 方法中,通过 setData 方法更新 list 数组中对应元素的 selected 属性,并根据该属性的值动态添加或删除 selected 类名,从而实现切换背景色的效果。

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了