Rumah > applet WeChat > Pembangunan program mini > 微信小程序组件:switch 开关选择器解读和分析

微信小程序组件:switch 开关选择器解读和分析

高洛峰
Lepaskan: 2017-03-31 13:41:22
asal
2548 orang telah melayarinya

switch 开关选择器组件说明:

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


switch 开关选择器示例代码运行效果如下:
微信小程序组件:switch 开关选择器解读和分析

下面是WXML代码:

<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>
Salin selepas log masuk



下面是JS代码:

Page({
  switch1Change: function (e){
    console.log(&#39;switch1 发生 change 事件,携带值为&#39;, e.detail.value)
  },
  switch2Change: function (e){
    console.log(&#39;switch2 发生 change 事件,携带值为&#39;, e.detail.value)
  }
})
Salin selepas log masuk



下面是WXSS代码:

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


switch 开关选择器的主要属性

属性名

类型

默认值

说明

checked Boolean false 是否选中
type String switch 样式,有效值:switch, checkbox
bindchange EventHandle
checked改变时触发change事件,event.detail={ value:checked}


个人经验:适用于选择一单项选择true和false,不建议用checkbox样式

这个适用于选择一单项选择true和false,不建议使用checkbox样式。因为checkbox控件已经有了。而且,这种用checkbox样式时,没有带后面的文本,图片上文本是我拼凑的,还没有加控制事件(不应该这么用)

Atas ialah kandungan terperinci 微信小程序组件:switch 开关选择器解读和分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan