微信小程式點選改變頁面顏色
阿新 • • 發佈:2020-09-17
微信小程式點選改變頁面顏色
用了colorui 元件庫
wxml
<view class="page" style="background-color: {{backgroundColor}}"> <view class="cu-bar bg-white solid-bottom"> <view class="action"> <text class="cuIcon-title text-blue"></text>選擇背景顏色 </view> </view> <view class="grid col-3 bg-white padding-sm"> <view class="padding-sm" wx:for="{{ColorList}}" wx:key='' wx:if="{{index<12}}"> <view class="bg-{{item.name}} padding radius text-center light" data-index='{{index}}' bindtap="changeBackgroungcolor"> <view class="text-lg">{{item.title}}</view> <view class="margin-top-sm text-Abc">{{item.name}}</view> </view> </view> </view> </view> js: //index.js //獲取應用例項 const app = getApp() Page({ data: { ColorList: app.globalData.ColorList, backgroundColor:'', color: "#fadbd9", }, //更換背景顏色 changeBackgroungcolor:function(e){ var that = this; const id = e.currentTarget.dataset.index; this.setData({ // backgroundColor: '#ec008c' // backgroundColor: "#ebd4ef" backgroundColor: app.globalData.ColorList[id].color }) console.log(id) } }) wxss: .page { display: block; min-height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: 1 }