xxmy-uni-colorui v0.0.4-RC

前言

ColorUI是一个非常优秀的css库！！！在你引入样式后可以根据class来调用组件。

注：fork自 ColorUI 项目

使用uniapp开发

从现有项目开始

npm install xxmy-uni-colorui

App.vue 引入关键Css

<style>
	@import "xxmy-uni-colorui/index.scss";
</style>

使用自定义导航栏

导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。

App.js 获得系统信息

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 './xxmy-uni-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>

如果你还有其他问题，欢迎关注公众号 「晓晓夢龑」( xiaoxiaomengyan3 )