快捷搜索:  汽车  科技

微信小程序开发好看的表格(微信小程序页面不好看)

微信小程序开发好看的表格(微信小程序页面不好看)创建list页1.在Pages目录下创建comment目录下面我们开始实操演练。打开上一节的DEMO小程序创建comment目录

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

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

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

微信小程序开发好看的表格(微信小程序页面不好看)(1)

消息列表最终效果

下面我们开始实操演练。

打开上一节的DEMO小程序

微信小程序开发好看的表格(微信小程序页面不好看)(2)

创建comment目录

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

微信小程序开发好看的表格(微信小程序页面不好看)(3)

创建list页

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

微信小程序开发好看的表格(微信小程序页面不好看)(4)

编辑list页面

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

微信小程序开发好看的表格(微信小程序页面不好看)(5)

这里是ColorUI的源代码

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

微信小程序开发好看的表格(微信小程序页面不好看)(6)

这是什么原因呢?

因为我们还没有引入ColorUI。

微信小程序开发好看的表格(微信小程序页面不好看)(7)

引入ColorUI

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

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

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

微信小程序开发好看的表格(微信小程序页面不好看)(8)

最终效果

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

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

猜您喜欢: