【微信小程序】列表渲染wx:for
创始人
2024-02-06 16:26:08
0

在这里插入图片描述

🏆今日学习目标:第十二期——列表渲染wx:for
😃创作者:颜颜yan_
✨个人主页:颜颜yan_的个人主页
⏰预计时间:20分钟
🎉专栏系列:我的第一个微信小程序


文章目录

  • 前言
  • 效果图
  • < block>< /block>标签
  • post.js
  • post.wxml
  • post.json
    • 页面的json文件和app.json文件配置的区别
  • 总结


前言

哈喽大家好,本期是微信小程序专栏第十二期,本期我们将学习列表渲染wx:for。
注意:每期内容是连载呢,建议大家可以看看往期内容,更好理解噢~


效果图

在这里插入图片描述
在这里插入图片描述

< block>< /block>标签

< block>标签没有实质意义,仅仅是一个包装,不会在页面内被渲染,在block标签中包裹的元素将被重复渲染。

在block标签上,放置了一个wx:for的属性,它的值为{{postList}}。wx:for将绑定一个数组,也就是post.js中的postList数组,它对应post.js文件中的setData数组数据。

wx:for-item指定数组当前元素的变量名,如下,我们将元素的变量名指定为item。

wx:for-index指定当前元素在数组中序号的变量名,我们命名为idx。
在这里插入图片描述
如果将wx:for-item="item"属性去掉,文章列表依然可以正常显示。
此时,不定义item,但是{{}}内依然有item,这是因为如果不定义数组子元素的变量名,小程序默认子元素的变量名就是item。也可以将它替换为其他的变量名,如果更改了子元素的变量名,那么{{}}中对应的也要进行更改。

post.js

将文章的数据提取到post.js中,组成一个数组。

 /*** 生命周期函数--监听页面加载* option为页面跳转所带来的参数*/onLoad:function(options) {var postList = [{object:{date:"Nov 9 2022",},title:"那个不为人知的故事",postImg:"/images/post/unknow-story.jpg",avatar:"/images/avatar/avatar-5.png",content:"超人气作者Twentine(无量渡口)经典之作,直击心底深处的柔软。这是杨昭和陈铭生的故事,这是卧底缉毒警察的故事。 你始终不曾离去,你永远在我心底。",readingNum:10989,collectionNum:{array:[1867]},commentNum:999},{object:{date:"Nov 10 2022",},title:"边城",postImg:"/images/post/biancheng.jpg",avatar:"/images/avatar/avatar-2.png",content:"沈从文代表作之一,重现湘西世界的诗意与纯净,书写人情美、人事美、人性美",readingNum:9999,collectionNum:{array:[8766]},commentNum:886},{object:{date:"Nov 11 2022",},title:"活着",postImg:"/images/post/alive.jpg",avatar:"/images/avatar/avatar-3.png",content:"《活着》讲述了人如何去承受巨大的苦难;讲述了眼泪的宽广和丰富;讲述了绝望的不存在;讲述了人是为了活着本身而活着的,而不是为了活着之外的任何事物而活着。",readingNum:1234,collectionNum:{array:[5676]},commentNum:890},{object:{date:"Nov 12 2022",},title:"哈利波特百科全书",postImg:"/images/post/harry.jpg",avatar:"/images/avatar/avatar-4.png",content:"手里没有哈利波特百科全书 ,怎么能称得上真正的哈迷!涵盖哈利·波特全系列内容,配全新精美素描插图、哈利波特魔法世界历史年表。",readingNum:789,collectionNum:{array:[906]},commentNum:345},{object:{date:"Nov 19 2022",},title:"三体:全三册 刘慈欣代表作",postImg:"/images/post/santi.jpg",avatar:"/images/avatar/avatar-5.png",content:"《三体》第73届世界科幻雨果奖获奖作品,银河奖特别奖,《三体3》轨迹奖长篇科幻小说!2017年世界雨果奖提名作品。",readingNum:99,collectionNum:{array:[8766]},commentNum:89}]this.setData({postList: postList})},

post.wxml

1、使用< block>< /block>标签将文章列表部分包裹起来
2、添加wx:for实现数据绑定,wx:for-item设置子元素变量名。


{false}}" circular="true">{postList}}" wx:for-item="item" wx:for-index="idx">{item.avatar}}">{{item.object.date}}{{item.title}}{item.postImg}}" mode="aspectFit">{{item.content}}{{item.readingNum}}{{item.collectionNum.array[0]}}{{item.commentNum}}

post.json

这里主要是配置post页面的导航栏背景色。我们在post.json中输入 "navigationBarBackgroundColor": "#145282"就可以更改导航栏的颜色啦~

全局配置是在app.json中,单个页面的配置在页面的json文件中配置。

页面的json文件和app.json文件配置的区别

  • 页面的json文件只能够配置和window相关的属性,app.json除了可以配置window外还可以配置pages、tabBar等选项。
  • 页面的json配置只需要加上window对象,就可以直接编写window下面的配置项。
{"usingComponents": {},"navigationBarBackgroundColor": "#145282"
}

总结

以上就是今天的学习内容啦~
如果有兴趣的话可以订阅专栏,持续更新呢~
咱们下期再见~
在这里插入图片描述

相关内容

热门资讯

喜欢穿一身黑的男生性格(喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识,其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思(思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思,以及思春和发春是什么意思对应的知识点,希望对各位有所帮助,...
网络用语zl是什么意思(zl是... 今天给各位分享网络用语zl是什么意思的知识,其中也会对zl是啥意思是什么网络用语进行解释,如果能碰巧...
为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?,以及为什么酷狗下载的歌曲不是...
华为下载未安装的文件去哪找(华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识,其中也会对华为下载未安装的文件去哪找到进行解...
家里可以做假山养金鱼吗(假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识,其中也会对假山能放鱼缸里吗进行解释,如果能碰巧解...
四分五裂是什么生肖什么动物(四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物,以及四分五裂打一生肖是什么对应的知识点,希...
怎么往应用助手里添加应用(应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识,其中也会对应用助手怎么添加微信进行解释,如果能...
客厅放八骏马摆件可以吗(家里摆... 今天给各位分享客厅放八骏马摆件可以吗的知识,其中也会对家里摆八骏马摆件好吗进行解释,如果能碰巧解决你...
美团联名卡审核成功待激活(美团... 今天百科达人给各位分享美团联名卡审核成功待激活的知识,其中也会对美团联名卡审核未通过进行解释,如果能...