- 微信小程序开发入门与实践
- 雷磊
- 321字
- 2022-03-25 09:51:41
4.6 完成静态文章列表
先把上节更改的post-image的mode属性恢复成我们需要的mode=aspectFill。
现在,文章列表还只有1篇文章。1篇文章如何叫做文章列表?
为了多几篇文章,我们将代码清单4-6的代码再复制几份,依次加入到post.wxml文件中。这里再复制两份,形成一个有3篇文章的文章列表。
如果CSS代码编写足够健壮,无须更改CSS代码,重复复制post.wxml中的文章代码即可迅速新增文章,且样式不会错乱。保存后,模拟器将呈现出3篇一模一样的文章来。效果如图4-16所示。
![](https://epubservercos.yuewen.com/BA16FB/10080941604402901/epubprivate/OEBPS/Images/Figure-P84_42212.jpg?sign=1739353041-Y995K14d9ZaCzRU3ihQTasOCRd15sGa5-0-9fa366829b239ab2680f777203c41cdb)
图4-16 复制文章
开发者可任意复制若干数量的文章,让页面看起来更像是一个文章列表。为了避免重复的数据,我们修改其中的两个文章数据,更改后的post.wxml文件如下。
![](https://epubservercos.yuewen.com/BA16FB/10080941604402901/epubprivate/OEBPS/Images/Figure-P84_56703.jpg?sign=1739353041-pfVJ5iwP22Wpasl8qqUGvm4ZYJaJJTSw-0-24a79f72a72fe4b1c4a7491655f65a1f)
![](https://epubservercos.yuewen.com/BA16FB/10080941604402901/epubprivate/OEBPS/Images/Figure-P85_56705.jpg?sign=1739353041-FQZ2m1SgdiaZWDmqBI0prQNDupYdHfb0-0-7ef72ae3cc17aa015bb99b9cd4098918)
![](https://epubservercos.yuewen.com/BA16FB/10080941604402901/epubprivate/OEBPS/Images/Figure-P86_56706.jpg?sign=1739353041-1hTXKyHe7mpM6FBE7sCcKHjegPt9WyW4-0-8ae33d925393e209f4313e6c3c399ce6)
保存后可以看到,3篇不同的文章已出现在了页面中。开发者可自行调整代码中的文字、图片,无须和示例代码保持一致。