小程序按钮设置分离操作

说明

这是我在刚入门写微信·小程序上碰到并解决的问题，网站上尚且未曾尝试过，理应同理。

问题描述

第一列的开关在正常设置时，会同时开同时关，为了方便分别操作，进行对每个开关命名。

wxml

在wxml中宫格对应的行中加入data-type一行，分别进行命名。

<van-grid-item use-slot wx:for="{{ 1 }}" wx:for-item="index">
     <van-switch
  checked="{{ checked }}"
  size = "21px"
  active-color="#07c160"
  inactive-color="#ee0a24"
   bindchange="onChange"
   data-type="one"
/>

js

onChange:function(event) {
    console.log(event)
    if(event.target.dataset.type == 'two'){
      this.setData({ checked2: !this.data.checked2 });
    }else if(event.target.dataset.type == 'one'){
      this.setData({ checked1: !this.data.checked1 });
    }else if(event.target.dataset.type == 'three'){
      this.setData({ checked3: !this.data.checked3 });
    }
    // 需要手动对 checked 状态进行更新

}
js对应功能括号内加入event，下面加入console.log(event) 语句。

本文地址：https://blog.csdn.net/LEON_6/article/details/107385312