coloruicss

ColorUIUI -ColorUI

ColorUIcssclass

UniAppQQ240787041

UniApp

/Colorui-UniApp /colorui

App.vue Css main.css icon.css

<style>
@import "colorui/main.css";
@import "colorui/icon.css";
@import "app.css"; /* css */
....
</style>

App.vue

onLaunch: function() {
  uni.getSystemInfo({
    success: function(e) {
      // #ifndef MP
      Vue.prototype.StatusBar = e.statusBarHeight;
      if (e.platform == 'android') {
        Vue.prototype.CustomBar = e.statusBarHeight + 50;
      } else {
        Vue.prototype.CustomBar = e.statusBarHeight + 45;
      };
      // #endif
      // #ifdef MP-WEIXIN
      Vue.prototype.StatusBar = e.statusBarHeight;
      let custom = wx.getMenuButtonBoundingClientRect();
      Vue.prototype.Custom = custom;
      Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
      // #endif		
      // #ifdef MP-ALIPAY
      Vue.prototype.StatusBar = e.statusBarHeight;
      Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
      // #endif
    }
  })
},

pages.json

"globalStyle": {
  "navigationStyle": "custom"
},

,main.js cu-custom

import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)

page.vue

<cu-custom bgColor="bg-gradual-blue" :isBack="true">
  <block slot="backText"></block>
  <block slot="content"></block>
</cu-custom>

/demo /colorui

App.wxss Css main.wxss icon.wxss

@import "colorui/main.wxss";
@import "colorui/icon.wxss";
@import "app.css"; /* css */
....

/template``/template

App.js

onLaunch: function() {
  wx.getSystemInfo({
    success: e => {
      this.globalData.StatusBar = e.statusBarHeight;
      let custom = wx.getMenuButtonBoundingClientRect();
      this.globalData.Custom = custom;  
      this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
    }
  })
},

App.json ,

"window": {
  "navigationStyle": "custom"
},
"usingComponents": {
  "cu-custom":"/colorui/components/cu-custom"
}

page.wxml

<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
  <view slot="backText"></view>
  <view slot="content"></view>
</cu-custom>

License

MIT

Copyright (c) 2020-present, XiaoGang Wen