Skip to main content

Switch

Switch selector.

Example

js

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)

bxml

<view class="page">   <view class="page__hd">       <text class="page__title">switch</text>       <text class="page__desc">开关</text>   </view>   <view class="page__bd">       <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>   </view></view>

Bug & Tip

  • tip: When switching type comes with vibration feedback in iOS, can be set in the system -> Sound and touch -> System Tactile Feedback Shut Down

Props#

NameTypeDescriptionDefault
checkedbooleanIf selectedfalse
disabledbooleanIs it disabled?false
colorstringSwitch The color of css of colorvar(--bnui-primay)

Events#

NameDescription
bindtapTap event for the switch
bindtapcaptureTap capture event
bindchangechecked Triggered when changed change Events, event.detail = { value}