争怎路由网/应用软件/内容

微信小程序组件解读与区分之switch 开关选择器

应用软件2024-03-11 阅读
微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的小程序开发环境和开发者生态。
switch 开关选择器组件说明:

switch，开关选择器。只能选择或者不选。这种属于表单控件或者查询条件控件。

switch 开关选择器示例代码运行效果如下：

下面是WXML代码：

[XML] 纯文本查看 复制代码

<view class="section section">
  <text class="title">switch style</text>
  <view class="body-view">
    <switch checked bindchange="switch1Change"/>
  </view>
</view>
<view class="section section">
  <text class="title">switch style</text>
  <view class="body-view">
    <switch bindchange="switch2Change"/>
  </view>
</view>
<view class="section section">
  <text class="title">checkbox style</text>
  <view class="body-view">
    <switch type="checkbox" checked bindchange="switch1Change"/>
  </view>
</view>
<view class="section section">
  <text class="title">checkbox style</text>
  <view class="body-view">
    <switch type="checkbox" bindchange="switch2Change"/>
  </view>
</view>
<view class="section section">
  <text class="title">西游记里都有谁</text>
  <view class="body-view">
    <switch type="checkbox" checked bindchange="switch2Change"/><text class="title">牛魔王</text>
  </view>
  <view class="body-view">
    <switch type="checkbox" checked bindchange="switch2Change"/><text class="title">孙悟空</text>
  </view>
   <view class="body-view">
    <switch type="checkbox" checked bindchange="switch2Change"/><text class="title">猪八戒</text>
  </view>
  <view class="body-view">
    <switch type="checkbox"  bindchange="switch2Change"/><text class="title">旗木卡卡西</text>
  </view>
</view>

下面是JS代码：

[JavaScript] 纯文本查看 复制代码

Page({
  switch1Change: function (e){
    console.log('switch1 发生 change 事件，携带值为', e.detail.value)
  },
  switch2Change: function (e){
    console.log('switch2 发生 change 事件，携带值为', e.detail.value)
  }
})

下面是WXSS代码：

[CSS] 纯文本查看 复制代码

.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}


switch 开关选择器的主要属性
属性名
类型
默认值
说明
checkedBooleanfalse是否选中
typeStringswitch样式，有效值：switch, checkbox
bindchangeEventHandle
checked改变时触发change事件，event.detail={ value:checked}

个人经验:适用于选择一单项选择true和false，不建议用checkbox样式
这个适用于选择一单项选择true和false，不建议使用checkbox样式。因为checkbox控件已经有了。而且，这种用checkbox样式时，没有带后面的文本，图片上文本是我拼凑的，还没有加控制事件（不应该这么用）
以上就是微信小程序组件解读和分析之switch 开关选择器的详细内容，更多请关注php中文网其它相关文章！
				
				

					
  • 微信
    • 
					
    • 
				

    小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。



          
    ……
    标签:微信小程序组件解读与区分之switch 开关选择器
     
    相关阅读