一、導讀

colorUI 是一款css類庫，超高的顏值，但是奈何自己使用的是wepy框架，官方給的是原生的方法，這里介紹一下如何在wepy項目中使用。

項目源碼git地址：傳送門

預覽小程序：

二、步驟

首先修改app.wpy，添加全局樣式，和使用全局組件

...usingComponents: {"cu-custom": "/public/styles/colorui/components/cu-custom"}, ... <style lang="less"> @import "/public/styles/colorui/main.wxss"; @import "/public/styles/colorui/icon.wxss"; </style>

修改colorUI中的cu-custom.js文件，引入wepy,修改組件初始數據，變成wepy的寫法

import wepy from 'wepy'/*** 組件的初始數據*/data: {StatusBar: wepy.$instance.globalData.StatusBar,CustomBar: wepy.$instance.globalData.CustomBar,Custom: wepy.$instance.globalData.Custom},

頁面中就可以這么使用demo中的標題欄

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

總結

以上是生活随笔為你收集整理的wepy集成colorui 样式框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。