您好,登錄后才能下訂單哦!
這篇文章主要講解了“微信小程序怎么實(shí)現(xiàn)switch組件”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“微信小程序怎么實(shí)現(xiàn)switch組件”吧!
實(shí)現(xiàn)效果圖:
開(kāi)關(guān)選擇器
屬性名 | 類(lèi)型 | 默認(rèn)值 | 說(shuō)明 |
---|---|---|---|
checked | Boolean | false | 是否選中 |
disabled | Boolean | false | 是否禁用 |
type | String | switch | 樣式,有效值:switch, checkbox |
bindchange | EventHandle | checked改變時(shí)觸發(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)
感謝各位的閱讀,以上就是“微信小程序怎么實(shí)現(xiàn)switch組件”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)微信小程序怎么實(shí)現(xiàn)switch組件這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。