//index.js //獲取應用實例 var app = getApp() Page({ data: { switchData: [ { id: 1, color: 'darkorange', isOn: false }, { id: 2, color: 'darksalmon', isOn: true }, { id: 3, isOn: false, }, { id: 4, color: 'firebrick', isOn: true } ], }, //事件處理函數 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this //調用應用實例的方法獲取全局數據 app.getUserInfo(function(userInfo){ //更新數據 that.setData({ userInfo:userInfo }) }) }, tapSwitch: function(event) { var index = event.currentTarget.id - 1; this.data.switchData[index].isOn = !this.data.switchData[index].isOn this.setData({ switchData: this.data.switchData }); } }) index.wxml <!--index.wxml--> <import src="../../utils/templates/switch/switch.wxml" /> <view class="container"> <text class="title">自定義switch</text> <view class="switch-container"> <view style="margin-right:20px" wx:for="{{switchData}}"> <template is="switch" data="{{isOn: item.isOn, id:item.id, onTintColor:item.color}}"/> </view> </view> <text class="title">微信switch</text> <view class="switch-container"> <switch/> </view> </view> index.wxss /**index.wxss**/ @import "../../utils/templates/switch/switch.wxss"; .title { font-size: 15; margin-bottom: 5px; color: gray; } .switch-container { display: flex; display: -webkit-flex; margin-bottom: 200rpx; }