微信小程序switch開關(guān)選擇器使用詳解

更新時(shí)間：2018年01月31日 11:56:52 作者：Rattenking

這篇文章主要為大家詳細(xì)介紹了微信小程序switch開關(guān)選擇器的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文為大家分享了微信小程序switch開關(guān)選擇器使用方法，供大家參考，具體內(nèi)容如下

效果圖

switch組件效果圖

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：開關(guān)選擇器的樣式—-switch, checkbox
color：switch 的顏色，同 css 的 color

DEMO下載

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

ES6 Promise對(duì)象的含義和基本用法分析
這篇文章主要介紹了ES6 Promise對(duì)象的含義和基本用法,結(jié)合實(shí)例形式分析了Promise的含義、功能、基本用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-06-06
JavaScript操作元素教你改變頁(yè)面內(nèi)容樣式
這篇文章主要為大家介紹了JavaScript操作元素，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-11-11
JS 拼湊字符串的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JS 拼湊字符串的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-09-09
JS Tween 顏色漸變
從我寫的as tween改寫的，基本功能跟as里面寫的一樣，只是沒有擴(kuò)展特定功能的接口（比如alpha2，move2，size2，color2等接口,這些在as tween里面都有實(shí)現(xiàn)）。
2008-12-12
由JavaScript技術(shù)實(shí)現(xiàn)的web小游戲（不含網(wǎng)游）
伴隨Ajax與網(wǎng)頁(yè)游戲的崛起，曾幾何時(shí)JavaScript也成了游戲開發(fā)時(shí)可供選擇的技術(shù)之一，文本僅列舉數(shù)項(xiàng)由JavaScript技術(shù)實(shí)現(xiàn)的web小游戲（不含網(wǎng)游），聊作參考之用。
2010-06-06
js控制容器隱藏出現(xiàn)防止樣式變化的兩種方法
這篇文章主要介紹了js控制容器隱藏出現(xiàn)防止樣式變化的兩種方法,需要的朋友可以參考下
2014-04-04
js實(shí)現(xiàn)文章目錄索引導(dǎo)航(table of content)
這篇文章主要介紹了js實(shí)現(xiàn)文章目錄索引導(dǎo)航(table of content),需要的朋友可以參考下
2020-05-05
JS 獲取select(多選下拉)中所選值的示例代碼
通過(guò)js獲取select(多選下拉)中所選值，具體實(shí)現(xiàn)如下，有需要的朋友可以參考下，希望對(duì)大家有所幫助
2013-08-08
淺談關(guān)于JavaScript的語(yǔ)言特性分析
本篇文章小編為大家介紹，淺談關(guān)于JavaScript的語(yǔ)言特性分析，有需要的朋友可以參考一下
2013-04-04
JavaScript實(shí)現(xiàn)翻轉(zhuǎn)圖片的三種方法小結(jié)
有時(shí),我們可能需要翻轉(zhuǎn)Web應(yīng)用中的媒體元素,所以這篇文章小編為大家詳細(xì)介紹了三種使用JavaScript翻轉(zhuǎn)圖片的方法,希望對(duì)大家有所幫助
2024-01-01