我們玩微信小程序的時(shí)候，經(jīng)常會(huì)苦惱頁面設(shè)置得怎么樣。

今天來我們來教大家如何使用ColorUi制作一個(gè)精美的消息列表。首先來回顧一下上一期的內(nèi)容，沒看的同學(xué)們可以回頭看一下。

介紹一款微信小程序前端界面利器COLORUI，讓你的小程序變美

在講解范例前，我們上一張圖，看看實(shí)操后的最終效果

消息列表最終效果

下面我們開始實(shí)操演練。

打開上一節(jié)的DEMO小程序

創(chuàng)建comment目錄

1.在Pages目錄下創(chuàng)建comment目錄

創(chuàng)建list頁

2. 在comment下新建一個(gè)page，名字為list，開發(fā)者工具會(huì)自動(dòng)補(bǔ)全其它相關(guān)頁。

編輯list頁面

3.去ColorUi的項(xiàng)目中拷貝代碼過來

這里是ColorUI的源代碼

粘貼到我們的list頁，然后編譯看下效果?？聪聢D可以看到一團(tuán)遭。

這是什么原因呢？

因?yàn)槲覀冞€沒有引入ColorUI。

引入ColorUI

切換到a，在頁面里加上上圖的兩行代碼，這樣就成功引入了ColorUI.

引入ColorUI后，再編譯一下看效果。登登登，是不是漂亮了好多？

大家做出來應(yīng)該是這個(gè)樣的：

最終效果

好啦，這一期就到這里，下一期我們來說下自定義頁腳導(dǎo)航，小程序新手一般都會(huì)問的問題。

更多的搜智干貨內(nèi)容請持續(xù)關(guān)注搜智相關(guān)的視頻和文章，以上內(nèi)容均為搜智原創(chuàng)內(nèi)容，如有轉(zhuǎn)載請注明出處