微信小程序 switch組件詳解及簡單實例
更新時間：2017年01月10日 15:14:15 投稿：lqh
這篇文章主要介紹了微信小程序 switch組件詳解及簡單實例 的相關資料,需要的朋友可以參考下
微信小程序switch
相關文章：
實現(xià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="{{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)
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
微信小程序上滑加載下拉刷新（onscrollLower）分批加載數(shù)據(jù)（一）
這篇文章主要介紹了微信小程序上滑加載下拉刷新（onscrollLower）分批加載數(shù)據(jù)的相關資料,需要的朋友可以參考下2017-05-05
這篇文章主要為大家介紹了Fabric.js?樣式不更新解決方法案例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了微信小程序-拍照或選擇圖片并上傳文件的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序 122100版本更新問題解決方案的相關資料,這里對微信小程序版本更新該如何解決提供解決方案，需要的朋友可以參考下2016-12-12
本文針對埋點系統(tǒng)和監(jiān)控系統(tǒng)的融合的一點進行簡單的介紹與探索，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序 實戰(zhàn)程序簡易新聞的制作的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序 PHP后端form表單提交實例詳解的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了為輸入框加入數(shù)字js校驗代碼分享，還是比較不錯的，這里分享給大家，供需要的朋友參考。2017-11-11
JS中 querySelector 與 getElementById 方法區(qū)別
這篇文章主要介紹了JavaScript中 querySelector 與 getElementById 方法與區(qū)別，圍繞querySelector 與 getElementById 的相關資料展開文章內(nèi)容,需要的朋友可以參考一下2021-10-10
這篇文章主要給大家分享JS創(chuàng)建對象的四種方式，分別是字面量的方式去創(chuàng)建對象、使用new字符創(chuàng)建對象、自定義構(gòu)造函數(shù)、工廠模式創(chuàng)建對象，更多詳細內(nèi)容，請參考下面文章的具體內(nèi)容2021-11-11