欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

小程序按钮设置分离操作

程序员文章站 2022-07-03 21:10:23
小程序按钮设置分离操作说明问题描述wxmljs说明这是我在刚入门写微信·小程序上碰到并解决的问题,网站上尚且未曾尝试过,理应同理。问题描述第一列的开关在正常设置时,会同时开同时关,为了方便分别操作,进行对每个开关命名。wxml在wxml中宫格对应的行中加入data-type一行,分别进行命名。

小程序按钮设置分离操作

说明

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

问题描述

小程序按钮设置分离操作第一列的开关在正常设置时,会同时开同时关,为了方便分别操作,进行对每个开关命名。

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

相关标签: 小程序