微信小程序switch開關選擇器使用詳解
更新時間：2018年01月31日 11:56:52 作者：Rattenking
這篇文章主要為大家詳細介紹了微信小程序switch開關選擇器的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文為大家分享了微信小程序switch開關選擇器使用方法，供大家參考，具體內(nèi)容如下
效果圖
WXML
<view class="tui-list-box">
<view class="tui-menu-list">
<text>狀態(tài)：{{isChecked1}}</text>
<switch class="tui-fr" checked="{{isChecked1}}" bindchange="changeSwitch1"/>
</view>
<view class="tui-menu-list">
<text>狀態(tài)：{{isChecked2}}</text>
<switch class="tui-fr" checked="{{isChecked2}}" bindchange="changeSwitch2"/>
</view>
<view class="tui-menu-list">
<text>狀態(tài)：{{isChecked3}}</text>
<switch class="tui-fr" color="#007aff" checked="{{isChecked3}}" bindchange="changeSwitch3"/>
</view>
<view class="tui-menu-list">
<text>狀態(tài)：{{isChecked4}}</text>
<switch class="tui-fr" color="#007aff" checked="{{isChecked4}}" bindchange="changeSwitch4"/>
</view>
<view class="tui-menu-list">
<text>狀態(tài)：{{isChecked5}}</text>
<switch class="tui-fr" type="checkbox" checked="{{isChecked5}}" bindchange="changeSwitch5"/>
</view>
<view class="tui-menu-list">
<text>狀態(tài)：{{isChecked6}}</text>
<switch class="tui-fr" type="checkbox" checked="{{isChecked6}}" bindchange="changeSwitch6"/>
</view>
</view>
JS
var pageObj = {
data: {
isChecked1: false,
isChecked2: true,
isChecked3: false,
isChecked4: true,
isChecked5: false,
isChecked6: true
}
};
for (var i = 0; i < 7; ++i) {
(function (i) {
pageObj['changeSwitch' + i] = function (e) {
var changedData = {};
changedData['isChecked' + i] = !this.data['isChecked' + i];
this.setData(changedData);
}
})(i)
}
Page(pageObj);
switch組件的屬性
- checked：是否選中—-false、true
- type：開關選擇器的樣式—-switch, checkbox
- color：switch 的顏色，同 css 的 color
DEMO下載
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了ES6 Promise對象的含義和基本用法,結合實例形式分析了Promise的含義、功能、基本用法及相關操作注意事項,需要的朋友可以參考下2019-06-06
這篇文章主要為大家介紹了JavaScript操作元素，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
下面小編就為大家?guī)硪黄狫S 拼湊字符串的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
從我寫的as tween改寫的，基本功能跟as里面寫的一樣，只是沒有擴展特定功能的接口（比如alpha2，move2，size2，color2等接口,這些在as tween里面都有實現(xiàn)）。2008-12-12
由JavaScript技術實現(xiàn)的web小游戲（不含網(wǎng)游）
伴隨Ajax與網(wǎng)頁游戲的崛起，曾幾何時JavaScript也成了游戲開發(fā)時可供選擇的技術之一，文本 僅列舉數(shù)項由JavaScript技術實現(xiàn)的web小游戲（不含網(wǎng)游），聊作參考之用。2010-06-06
這篇文章主要介紹了js控制容器隱藏出現(xiàn)防止樣式變化的兩種方法,需要的朋友可以參考下2014-04-04
js實現(xiàn)文章目錄索引導航(table of content)
這篇文章主要介紹了js實現(xiàn)文章目錄索引導航(table of content),需要的朋友可以參考下2020-05-05
通過js獲取select(多選下拉)中所選值，具體實現(xiàn)如下，有需要的朋友可以參考下，希望對大家有所幫助2013-08-08
本篇文章小編為大家介紹，淺談關于JavaScript的語言特性分析，有需要的朋友可以參考一下2013-04-04
JavaScript實現(xiàn)翻轉(zhuǎn)圖片的三種方法小結
有時,我們可能需要翻轉(zhuǎn)Web應用中的媒體元素,所以這篇文章小編為大家詳細介紹了三種使用JavaScript翻轉(zhuǎn)圖片的方法,希望對大家有所幫助2024-01-01