生活随笔
收集整理的這篇文章主要介紹了
wepy集成colorui 样式框架
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、導(dǎo)讀
colorUI 是一款css類庫(kù)，超高的顏值，但是奈何自己使用的是wepy框架，官方給的是原生的方法，這里介紹一下如何在wepy項(xiàng)目中使用。項(xiàng)目源碼git地址：傳送門預(yù)覽小程序：
二、步驟
首先修改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,修改組件初始數(shù)據(jù)，變成wepy的寫法
import wepy
from 'wepy'data
: {StatusBar
: wepy
.$instance
.globalData
.StatusBar
,CustomBar
: wepy
.$instance
.globalData
.CustomBar
,Custom
: wepy
.$instance
.globalData
.Custom
},
頁面中就可以這么使用demo中的標(biāo)題欄
<cu
-custom bgColor
="bg-gradual-pink" isBack
="{{true}}"><view slot
="backText">返回
</view
><view slot
="content">海報(bào)
</view
></cu
-custom
>
總結(jié)
以上是生活随笔為你收集整理的wepy集成colorui 样式框架的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
