「精品」微信小程序开发（七）————文章列表页制作

今天有读者私聊我说我发布的文章太简单了，关于这一点大家不要着急，我会由浅入深一点一点带领大家攻克微信小程序滴，废话不说，开始进行今天的教学。

上一篇文章中，我们已经学会了轮播图制作，如图所示：

轮播图

今天我们就要把文章列表页面给做好，给大家看一下成品图：

文章列表图

关于这个列表页的代码，仍然是写在post.wxml里面的，我们的文章列表就是放在轮播图的下方，在这里，我直接把文章列表页面的代码给大家贴过来，毕竟界面和样式不是我们的重点，代码如下：

post.wxml

post.wxss

post.wxss

post.wxss

由于wxss文件里面的代码较多，我截了三个图片，大家拼一块就行啦，大家来看一下我刚才些的文章列表吧，如图：

效果图

效果试出来了，但是大家想想，这些数据我都是这么直白的写在wxml文件里面吗，当然，你直接把数据写在wxml文件里面可以，但是当你维护的时候就知道多恐怖了，那么我们正确的做法是放在哪里呢，大家自定打开post.js文件，大家找到这个data，如图：

data

我们通常都是把数据写在data里面，然后wxml进行调用，我们来写一个，如图：

data了里面的书写格式是 属性名：值，这个属性名大家自己按照自己的喜好进行命名就行，我定义了一个属性name它的值为小王，那么我们应该怎么在wxml文件里面进行调用呢，很简单，大家来看一下代码就懂了：

很简单吧，在wxml中就是把你定义的属性值放在两个花括号里面就ok了，大家自行把剩下的给填充上吧。

今天就到这里吧，下一章我们讲解如何实现多个文章列表，大家可以自己思考思考，欢迎在评论区踊跃发言。

最后特别希望大家能够多多关注，多多支持，多多收藏，多多分享。