微信小程序 switch组件详解及简单实例

2026-08-25 15:49:50

微信小程序switch

相关文章：

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input

微信小程序 form

微信小程序 checkbox

实现效果图：

开关选择器

属性名	类型	默认值	说明
checked	Boolean	false	是否选中
disabled	Boolean	false	是否禁用
type	String	switch	样式，有效值：switch, checkbox
bindchange	EventHandle		checked改变时触发change事件，event.detail={ value:checked}

示例代码：

<view class="section section_gap">
 <view class="section__title">type="switch"</view>
 <view class="body-view">
 <switch checked="{{switch1Checked}}" bindchange="switch1Change"/>
 </view>
</view>

<view class="section section_gap">
 <view class="section__title">type="checkbox"</view>
 <view class="body-view">
 <switch type="checkbox" checked="{{switch2Checked}}" bindchange="switch2Change"/>
 </view>
</view>

var pageData = {
 data: {
 switch1Checked: true,
 switch2Checked: false,
 switch1Style: '',
 switch2Style: 'text-decoration: line-through'
 }
}
for(var i = 1; i <= 2; ++i) {
 (function(index) {
 pageData[`switch${index}Change`] = function(e) {
 console.log(`switch${index}发生change事件，携带值为`, e.detail.value)
 var obj = {}
 obj[`switch${index}Checked`] = e.detail.value
 this.setData(obj)
 obj = {}
 obj[`switch${index}Style`] = e.detail.value ? '' : 'text-decoration: line-through'
 this.setData(obj)
 }
 })(i)
}
Page(pageData)

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序实战程序简易新闻的制作

微信小程序实战项目: 简易新闻制作先看下效果: 实现思路数据全部是采用的本地数据,图片也是本地图片,因为苦逼的个人开发者,无法认证:toolbar四个现象:新闻,笑话,历史上的今天和主页,集中主页采用的是默认的页面,添加自己的一些内容:数据绑定,列表渲染,条件渲染和事件的使用:使用一些基础的View和text,部分API的使用: 代码结构目录用途 images 存放本地图片 pages 存放页面,history历史上的今天,index主页,joke笑话,news新闻 utils 工具包
微信小程序开发之快递查询功能的实现

微信小程序快递查询功能: 产品需求, 准备api, 代码编写. 第一步:产品需求,我们需要实现如下图的一个功能,在文本框输入快递单号,点击查询,下面出来我们需要的快递信息第二步:准备我们先找一个快递的api接口,通过http://apistore.baidu.com/我们可以看到很多的api,我们找一个快递查询的我们可以看到有接口地址,和一些参数.做好这个准备接下来就开始编码工作了---- 第三步:编码工作我们新建一个Express的文件,然后默认文件准备齐全我们现在app.js中
微信小程序 slider 详解及实例代码

微信小程序slider 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 滑动选择器属性名类型默认值说明 min Number 0 最小值 max Number 100 最大值 step Number 1 步长,取值必须大
微信小程序 radio单选框组件详解及实例代码

微信小程序单选框radio 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: radio-group 单选群组,内部由多个radio组成属性名类型默认值说明 bindchange EventHandle radio-g
微信小程序组件 contact-button（客服会话按钮）详解及实例代码

微信小程序组件 contact-button contact-button 客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话. 属性名类型默认值说明 size Number 18 会话按钮大小,有效值 18-27,单位:px type String default-dark 会话按钮的样式类型,有效值 default-dark, default-light session-from String 用户从该按钮进入会话时,开发者将收到带上本参数的事件推送.本
微信小程序摇一摇抽奖简单实例实现代码

微信小程序摇一摇抽奖微信小程序目录为了更好的理解小程序和小程序开发,我们首先来看一下项目的目录. 首先看下根目录下的app.json的文件,可以看到在"pages"的数组里,里面配置了每个界面,且包含了每个界面文件的目录我们接下来看一下page文件夹,可以看到每个页面需要包含两个文件,一个是js文件,是每个界面的入口,wxml的文件是每个界面的布局文件,wxss是样式文件. 接下来看一下logs文件夹,在logs文件夹中比index文件夹中多出了一个logs.json的文件,l
微信小程序 picker-view 组件详解及简单实例

picker-view 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 嵌入页面的滚动选择器属性名类型默认值说明 value Number Array 数组中的数字依次表示 picker-view 内的 picker
微信小程序 textarea 组件详解及简单实例

微信小程序textarea 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 多行输入框. 属性名类型默认值说明 value String 输入框的内容 placeholder String 输入框为空时占位符 placehold
微信小程序 switch组件详解及简单实例

微信小程序switch 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 开关选择器属性名类型默认值说明 checked Boolean false 是否选中 disabled Boolean false 是否禁用 typ
微信小程序 label 组件详解及简单实例

微信小程序label 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件. for优先级高于内部控件,内部有多个控件的时候
微信小程序 Button 组件详解及简单实例

微信小程序 Button 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现实例效果图: 属性名类型默认值说明 size String default 有效值default, mini type String default 按钮的样
微信小程序 checkbox组件详解及简单实例

微信小程序表单组件 checkbox 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: checkbox-group 多选项目组,内部由多个checkbox组成. checkbox-group内只能包含checkbox 属性名
微信小程序 form组件详解及简单实例

微信小程序form 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 将表单内的用户输入的switch input checkbox slider radio picker 提交当点击 <form/> 表单中 formType
微信小程序 checkbox组件详解及简单实例

微信小程序表单组件 checkbox 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: checkbox-group 多选项目组,内部由多个checkbox组成. checkbox-group内只能包含checkbox 属性名
微信小程序 picker 组件详解及简单实例

微信小程序picker 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 微信小程序picker 滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器普通选择器:mode=
微信小程序 input输入框详解及简单实例

微信小程序输入框input 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 微信小程序输入框input 属性名类型默认值说明 value String 输入框的内容 type String text input的类型,

微信小程序 switch组件详解及简单实例

相关推荐

随机推荐