微信小程序 switch組件詳解及簡單實例
更新時間:2017年01月10日 15:14:15 投稿:lqh
這篇文章主要介紹了微信小程序 switch組件詳解及簡單實例 的相關(guān)資料,需要的朋友可以參考下
微信小程序switch
相關(guān)文章:
實現(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="{{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)文章
You-Dont-Know-JS作用域?qū)W習(xí)文檔
這篇文章主要介紹了You-Dont-Know-JS作用域?qū)W習(xí)文檔,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
Lodash加減乘除add?subtract?multiply?divide方法源碼解讀
這篇文章主要介紹了Lodash加減乘除add?subtract?multiply?divide方法源碼解讀,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05
微信小程序中實現(xiàn)一對多發(fā)消息詳解及實例代碼
這篇文章主要介紹了微信小程序中實現(xiàn)一對多發(fā)消息詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02
微信小程序 使用picker封裝省市區(qū)三級聯(lián)動實例代碼
這篇文章主要介紹了微信小程序 使用picker封裝省市區(qū)三級聯(lián)動實例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10


