您好,登錄后才能下訂單哦!
小編給大家分享一下微信小程序如何實現(xiàn)switch組件,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
實現(xiàn)效果圖:
開關(guān)選擇器
屬性名 | 類型 | 默認值 | 說明 |
---|---|---|---|
checked | Boolean | false | 是否選中 |
disabled | Boolean | false | 是否禁用 |
type | String | switch | 樣式,有效值:switch, checkbox |
bindchange | EventHandle | checked改變時觸發(fā)change事件,event.detail={ value:checked} |
示例代碼:
<view class="section section_gap"> <view class="section__title">type="switch"</view> <view class="body-view"> <switch checked="{{switch2Checked}}" bindchange="switch2Change"/> </view> </view> <view class="section section_gap"> <view class="section__title">type="checkbox"</view> <view class="body-view"> <switch type="checkbox" checked="{{switch3Checked}}" bindchange="switch3Change"/> </view> </view>
var pageData = { data: { switch2Checked: true, switch3Checked: false, switch2Style: '', switch3Style: 'text-decoration: line-through' } } for(var i = 1; i <= 2; ++i) { (function(index) { pageData[`switch${index}Change`] = function(e) { console.log(`switch${index}發(fā)生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)
以上是“微信小程序如何實現(xiàn)switch組件”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。