小程序新闻列表页面布局代码_微信小程序页面不好看？带你如何用ColorUi制作一个精美消息列表...

我们在做微信小程序的时候，往往会因为页面怎么设置的好看而烦恼。今天来我们来教大家如何使用ColorUi制作一个精美的消息列表。首先来回顾一下上一期的内容，没看的同学们可以回头看一下。

介绍一款微信小程序前端界面利器COLORUI，让你的小程序变美

在讲解范例前，我们上一张图，看看实操后的最终效果

消息列表最终效果

下面我们开始实操演练。

打开上一节的DEMO小程序

创建comment目录

1.在Pages目录下创建comment目录

创建list页

2. 在comment下新建一个page，名字为list，开发者工具会自动补全其它相关页。

编辑list页面

3.去ColorUi的项目中拷贝代码过来

这里是ColorUI的源代码

粘贴到我们的list页，然后编译看下效果。看下图可以看到一团遭。

这是什么原因呢？

因为我们还没有引入ColorUI。

引入ColorUI

切换到app.wxss，在页面里加上上图的两行代码，这样就成功引入了ColorUI.

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

大家做出来应该是这个样的：

最终效果

好啦，这一期就到这里，下一期我们来说下自定义页脚导航，小程序新手一般都会问的问题。

更多的搜智干货内容请持续关注搜智相关的视频和文章，以上内容均为搜智原创内容，如有转载请注明出处