微信小程序动态操控switch开和关

最新推荐文章于 2024-11-23 00:45:00 发布

原创最新推荐文章于 2024-11-23 00:45:00 发布 · 2.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#switch #前端

小程序 + uni-app 专栏收录该内容

28 篇文章

订阅专栏

本文分享了小程序中switch组件的应用技巧，包括如何通过data属性控制开关状态，以及如何使用事件监听开关变化，适用于小程序开发者快速上手。

最近小程序项目中遇到了switch方面的一些应用，这边就来总结下。

// 
<switch checked="{{switchCheck}}"  @change="switch"/>
<view @tap = 'openSwitch'> 打开开关 </view>
<view @tap = 'closeSwitch'> 关闭开关 </view>

//
data = {
        switchCheck : false,
 };

methods = {
		openSwitch(){   // 打开开关
			this.switchCheck = true;
		},
		closeSwitch(){   //关闭开关
			this.switchCheck = false;
		},
	 	switch(e){    //   点击开关自身获取value值
            if(e.detail.value==true){
           		 //  开关打开状态
            }else{
                 //  开关关闭状态
             }
         },
}