微信小程序中列表渲染实现代码的深度探究-FinClip官网

微信小程序中列表渲染实现代码的深度探究

why 272 2024-08-02

本篇文章给大家带来的内容是关于微信小程序中列表渲染的实现代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

模板弄好了,就要遍历数据了
数据是模拟好的,在datas文件夹中有list-data.js文件,这就是提前准备好的数据:
list-data.js:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

let list_data = [
 
  {    date: &#39;may 19 2018&#39;,
    title: &#39;教育理念&#39;,
    detail_img: &#39;/images/detail/carousel/02.jpg&#39;,
    avatar: &#39;/images/avatar/4.png&#39;,
    detail_content: &#39;让每一个 IT 人，都直接或间接地受到过尚硅谷帮助！尚硅谷由一群有活力、有理想、有责任、有担当的尚硅谷人组成，我们将不负青春，为传播 IT 技术、为软件行业的健康的生态发展贡献力量。&#39;,
    headImgSrc: &#39;/images/detail/carousel/02.jpg&#39;,
    author: &#39;钢铁侠 &#39;,
    dataTime: &#39;24time&#39;,
    detail_love_image1: &#39;/images/icon/chat.png&#39;,
    detail_love_image2: &#39;/images/icon/view.png&#39;,
    love_count: 88,
    attention_count: 66,
    detail: &#39;钢铁战队。。&#39;,
    music: {
      dataUrl: &#39;http://up.mcyt-/down/46100.mp3&#39;, // 音乐链接
      title: &#39;IF-Ken Arai&#39;,   // 音乐标题
      coverImgUrl: &#39;http://y.gtimg-/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000&#39;,
    },
    postId: 0
  },
  {    date: &#39;may 19 2018&#39;,
    title: &#39;尚硅谷&#39;,
    detail_img: &#39;/images/detail/carousel/01.jpg&#39;,
    avatar: &#39;/images/avatar/4.png&#39;,
    detail_content: &#39;硅谷IT教育隶属于北京晟程华科教育科技有限公司，是国内领先的专业IT教育培训机构，拥有北京、深圳两处基地。自2013年成立以来，凭借领先的教育理念、前沿的课程体系、优秀的教学团队、科学的考评制度、严格的教务管理、完备的就业保障，已经为行业输送了万余名高端技术人才。&#39;,
    headImgSrc: &#39;/images/detail/carousel/01.jpg&#39;,
    author: &#39;美国队长&#39;,
    dataTime: &#39;24time&#39;,
    detail_love_image1: &#39;/images/icon/chat.png&#39;,
    detail_love_image2: &#39;/images/icon/view.png&#39;,
    love_count: 88,
    attention_count: 66,
    detail: &#39;有魅力的老男人。&#39;,
    music: {
      dataUrl: &#39;http://www.ytmp3-/down/50395.mp3&#39;, // 音乐链接
      title: &#39;一路向北&#39;,   // 音乐标题
      coverImgUrl: &#39;http://y.gtimg-/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000&#39;,
    },
    postId: 1
  },
  {    date: &#39;may 19 2018&#39;,
    title: &#39;学科介绍&#39;,
    detail_img: &#39;/images/detail/carousel/03.jpg&#39;,
    avatar: &#39;/images/avatar/4.png&#39;,
    detail_content: &#39;尚硅谷现开设JavaEE+大数据、HTML5前端+全栈、大数据+机器学习、Python+人工智能、Android+HTML5混合开发等多门学科；同时，通过视频分享、谷粒学院在线课堂、直播课堂等多种方式，满足了全国编程爱好者对多样化学习场景的需求。目前，尚硅谷“谷粉”人数已超500万，面授班学员绝大多数都在北上广深等一线城市高薪就业，就业薪资更是屡创新高！&#39;,
    headImgSrc: &#39;/images/detail/carousel/03.jpg&#39;,
    author: &#39;绿巨人&#39;,
    dataTime: &#39;24time&#39;,
    detail_love_image1: &#39;/images/icon/chat.png&#39;,
    detail_love_image2: &#39;/images/icon/view.png&#39;,
    love_count: 88,
    attention_count: 66,
    detail: &#39;巨无霸教授。&#39;,
    music: {
      dataUrl: &#39;http://www.ytmp3-/down/50355.mp3&#39;, // 音乐链接
      title: &#39;听海&#39;,   // 音乐标题
      coverImgUrl: &#39;http://y.gtimg-/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000&#39;,
    },
    postId: 2
  },
  {    date: &#39;2018/3/15 下午 4:30:35&#39;,
    title: &#39;贾静雯简介&#39;,
    detail_img: &#39;/images/detail/list/j2.jpg&#39;,
    detail_content: &#39;贾静雯（Alyssa Chia），1974年10月7日出生于台湾省台北市，祖籍天津市，华语影视女演员、节目主持人。1990年，贾静雯因接拍爱之味妞妞甜八宝广告而出道演艺圈；同年，她还出演了个人的首部电视剧《佳家福》。1994年，贾静雯开始担任一系列儿童节目的主持人。1997年，她凭借家庭剧《四千金》获得台湾电视金钟奖最佳新人奖[1]  。2000年，贾静雯主演的古装剧《飞龙在天》获得了台湾电视剧年度收视冠军。&#39;,
    detail_love_image1: &#39;/images/icon/chat.png&#39;,
    detail_love_image2: &#39;/images/icon/view.png&#39;,
    love_count: 92,
    headImgSrc: &#39;/images/detail/list/j2.jpg&#39;,
    author: &#39;新华社&#39;,
    attention_count: 88,
    avatar: &#39;/images/avatar/1.png&#39;,
    music: {
      dataUrl: &#39;http://up.mcyt-/down/46101.mp3&#39;, // 音乐链接
      title: &#39;Sunset Jesus-Avicii&#39;,   // 音乐标题
      coverImgUrl: &#39;http://y.gtimg-/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000&#39;,
    },
    postId: 3
  },
  {    date: &#39;2018/3/17 下午3:30:35&#39;,
    title: &#39;贾静雯作品展&#39;,
    detail_img: &#39;/images/detail/list/j3.jpg&#39;,
    detail_content: &#39;2001年，贾静雯将工作重心转向内地，并主演了传奇剧《大汉天子》。2002年，她凭借武侠剧《倚天屠龙记》在内地赢得更高关注度[2]  。2003年，贾静雯获得FHM全球百大性感美女亚洲区冠军。2006年，他主演了现代剧《悲伤时唱首歌》。此后几年，贾静雯相继出演了传奇剧《太平公主秘史》、剧情片《不能说的夏天》等影视作品&#39;,
    detail_love_image1: &#39;/images/icon/chat.png&#39;,
    detail_love_image2: &#39;/images/icon/view.png&#39;,
    love_count: 88,
    attention_count: 66,
    headImgSrc: &#39;/images/detail/list/j3.jpg&#39;,
    author: &#39;新华社&#39;,
    avatar: &#39;/images/avatar/2.png&#39;,
    music: {
      dataUrl: &#39;http://up.mcyt-/down/46102.mp3&#39;, // 音乐链接
      title: &#39;汪峰 - 儿时&#39;,   // 音乐标题
      coverImgUrl: &#39;http://y.gtimg-/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000&#39;,
    },
    postId: 4
  },
  {    date: &#39;sep 19 2016&#39;,
    title: &#39;娱乐新闻&#39;,
    detail_img: &#39;/images/detail/list/j4.jpg&#39;,
    avatar: &#39;/images/avatar/3.png&#39;,
    detail_content: &#39;2014年，贾静雯与小自己九岁的台湾演员修杰楷相恋[41]  。2015年5月5日，贾静雯的男友修杰楷在微博宣布了贾静雯已身怀有孕的消息，并发出了他与贾静雯和梧桐妹的两张合照，随后，贾静雯转发了此条微博并希望得到大家的祝福[42]  ；同年8月7日，贾静雯以剖宫产方式生下了与修杰楷的第一个女儿“咘咘”，而此前两人已正式注册结婚[43]  。&#39;,
    headImgSrc: &#39;/images/detail/list/j4.jpg&#39;,
    author: &#39;李白3&#39;,
    detail_love_image1: &#39;/images/icon/chat.png&#39;,
    detail_love_image2: &#39;/images/icon/view.png&#39;,
    love_count: 88,
    attention_count: 66,
    detail: &#39;女神。。。&#39;,
    music: {
      dataUrl: &#39;http://up.mcyt-/down/46110.mp3&#39;, // 音乐链接
      title: &#39;曲婉婷 - 我的歌声里-(电视剧《在线爱》主题曲)&#39;,   // 音乐标题
      coverImgUrl: &#39;http://y.gtimg-/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000&#39;,
    },
    postId: 5
  },
  {    date: &#39;sep 19 2016&#39;,
    title: &#39;社会活动&#39;,
    detail_img: &#39;/images/detail/list/j6.jpg&#39;,
    avatar: &#39;/images/avatar/4.png&#39;,
    detail_content: &#39;2012年，贾静雯担任公益大使，发起为弱势儿童和青少年课后照护计划，并为此次活动献唱了个人单曲《许一个愿望》。2014年，贾静雯参加了最终梦想年度时尚魅力女性颁奖盛典，并在典礼上获得了亲情天使奖[50] &#39;,
    headImgSrc: &#39;/images/detail/list/j6.jpg&#39;,
    author: &#39;新华社&#39;,
    detail_love_image1: &#39;/images/icon/chat.png&#39;,
    detail_love_image2: &#39;/images/icon/view.png&#39;,
    love_count: 88,
    attention_count: 66,
    detail: &#39;女神2。。。&#39;,
    music: {
      dataUrl: &#39;http://up.mcyt-/down/46100.mp3&#39;, // 音乐链接
      title: &#39;IF-Ken Arai&#39;,   // 音乐标题
      coverImgUrl: &#39;http://y.gtimg-/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000&#39;,
    },
    postId: 6
  },];
 
module.exports = {list_data};

因为要在list.wxml这个页面中用到数据,所以在list.js中引入
用module.exports暴露,用require引入

然后在页面遍历数据就可以了
遍历用wx:for,wx:key是提高性能的,为每个遍历的个体提供唯一标示,遍历出来的每个个体是item

<!-- 
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item 
-->
  <view wx:for=&#39;{{listArray}}&#39; wx:key=&#39;{{index}}&#39;>
    <view>
      <!-- 把数据item传递给模板,使用三点运算符的方式,模板那边就可以直接用属性名获取数据了,不用再xxx.xxx来获取数据 -->
      <template is=&#39;listTmp&#39; data=&#39;{{...item}}&#39;/>
    </view>
  </view>

在list-template.wxml模板获取数据:

<template name=&#39;listTmp&#39;><view class=&#39;tmpContainer&#39;>
  <view class=&#39;avatar_date&#39;>
    <image src=&#39;{{avatar}}&#39;></image>
    <text>{{date}}</text>
  </view>
  <text class=&#39;company&#39;>{{title}}</text>
  <image class=&#39;contentImg&#39; src=&#39;{{detail_img}}&#39;></image>
  <text class=&#39;content&#39;>{{detail_content}}</text>
  <view class=&#39;collection_love&#39;>
    <image src=&#39;/images/icon/view.png&#39;></image>
    <text>{{love_count}}</text>
    <image src=&#39;/images/icon/star.png&#39;></image>
    <text>{{attention_count}}</text>
  </view></view></template>

app开发者平台在数字化时代的重要性与发展趋势解析

272 2024-08-02

微信小程序中列表渲染实现代码的深度探究

app开发者平台在数字化时代的重要性与发展趋势解析

探索flutter框架开发的app在移动应用市场的潜力与挑战

智慧屏第三方App安装如何提升用户体验与功能拓展

最近发表

更多内容

小程序SDK

Finclip技术文档

小程序开发

小程序容器

小程序框架

Finclip小程序平台

Finclip用户投稿

车联网

推荐文章

小程序SDK是什么意思？小程序sdk和插件有什么区别？

小程序支付功能怎么实现？

企业app开发流程是什么？

app运营模式有哪些？

小程序多端引流怎么做？

小程序生态分析的机会和威胁

Flutter入门这一篇效率文章就够了

原生与跨平台解决方案分析,跨平台软件开发技术方案

热更新技术：让软件更新变得更加轻松快速

解决方案

银行解决方案

证券解决方案

互联网解决方案

政企OA解决方案

科技解决方案

loT解决方案

信任解决方案

热评文章

AppCan:基于混合模式的移动应用开发,移动混合模

Hybrid App混合模式开发的了解

小程序容器技术助力券商数字营销突围，小程序容器化的意

用mpvue开发微信小程序基础知识（vue.js开发

小程序多端框架全面测评对比，强烈推荐！

券商app架构 - 解析券商应用程序的构建与设计