小程序按钮设置分离操作
程序员文章站
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
上一篇: 使用vant的移动端REM适配方法
下一篇: iOS开发:Xcode报错问题