微信小程式點選改變頁面顏色

用了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
}