微信小程序 switch組件詳解及簡單實(shí)例
更新時(shí)間：2017年01月10日 15:14:15 投稿：lqh
這篇文章主要介紹了微信小程序 switch組件詳解及簡單實(shí)例 的相關(guān)資料,需要的朋友可以參考下
微信小程序switch
相關(guān)文章：
實(shí)現(xiàn)效果圖：
開關(guān)選擇器
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| 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="{{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>
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}發(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)
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
利用js實(shí)現(xiàn)簡單開關(guān)燈代碼
這篇文章主要分享的是如何利用js實(shí)現(xiàn)簡單開關(guān)燈代碼，下面文字圍繞js實(shí)現(xiàn)簡單開關(guān)燈的相關(guān)資料展開具體內(nèi)容,需要的朋友可以參考以下，希望對大家又所幫助2021-11-11
這篇文章主要介紹了微信小程序 地圖map詳解及簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01
You-Dont-Know-JS作用域?qū)W習(xí)文檔
這篇文章主要介紹了You-Dont-Know-JS作用域?qū)W習(xí)文檔,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Lodash加減乘除add?subtract?multiply?divide方法源碼解讀
這篇文章主要介紹了Lodash加減乘除add?subtract?multiply?divide方法源碼解讀,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
微信小程序中實(shí)現(xiàn)一對多發(fā)消息詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序中實(shí)現(xiàn)一對多發(fā)消息詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02
微信小程序支付之c#后臺(tái)實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序支付之c#后臺(tái)實(shí)現(xiàn)方法的相關(guān)資料,希望通過本文能幫助到大家，讓大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-10-10
微信小程序 使用picker封裝省市區(qū)三級聯(lián)動(dòng)實(shí)例代碼
這篇文章主要介紹了微信小程序 使用picker封裝省市區(qū)三級聯(lián)動(dòng)實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了微信小程序 首頁制作簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-04-04
微信小程序 本地存儲(chǔ)及登錄頁面處理實(shí)例詳解
這篇文章主要介紹了微信小程序 本地存儲(chǔ)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要為大家介紹了使用?JS?復(fù)制頁面內(nèi)容的三種方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08