小程序中怎么實現列表渲染

這篇文章將為大家詳細講解有關小程序中怎么實現列表渲染，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

模板弄好了,就要遍歷數據了
數據是模擬好的,在datas文件夾中有list-data.js文件,這就是提前準備好的數據:
list-data.js:

let list_data = [

  {    date: 'may 19 2018',
    title: '教育理念',
    detail_img: '/images/detail/carousel/02.jpg',
    avatar: '/images/avatar/4.png',
    detail_content: '讓每一個 IT 人，都直接或間接地受到過尚硅谷幫助！尚硅谷由一群有活力、有理想、有責任、有擔當的尚硅谷人組成，我們將不負青春，為傳播 IT 技術、為軟件行業的健康的生態發展貢獻力量。',
    headImgSrc: '/images/detail/carousel/02.jpg',
    author: '鋼鐵俠 ',
    dataTime: '24time',
    detail_love_image1: '/images/icon/chat.png',
    detail_love_image2: '/images/icon/view.png',
    love_count: 88,
    attention_count: 66,
    detail: '鋼鐵戰隊。。',
    music: {
      dataUrl: 'http://up.mcyt.net/down/46100.mp3', // 音樂鏈接
      title: 'IF-Ken Arai',   // 音樂標題
      coverImgUrl: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    },
    postId: 0
  },
  {    date: 'may 19 2018',
    title: '尚硅谷',
    detail_img: '/images/detail/carousel/01.jpg',
    avatar: '/images/avatar/4.png',
    detail_content: '硅谷IT教育隸屬于北京晟程華科教育科技有限公司，是國內領先的專業IT教育培訓機構，擁有北京、深圳兩處基地。自2013年成立以來，憑借領先的教育理念、前沿的課程體系、優秀的教學團隊、科學的考評制度、嚴格的教務管理、完備的就業保障，已經為行業輸送了萬余名高端技術人才。',
    headImgSrc: '/images/detail/carousel/01.jpg',
    author: '美國隊長',
    dataTime: '24time',
    detail_love_image1: '/images/icon/chat.png',
    detail_love_image2: '/images/icon/view.png',
    love_count: 88,
    attention_count: 66,
    detail: '有魅力的老男人。',
    music: {
      dataUrl: 'http://www.ytmp3.cn/down/50395.mp3', // 音樂鏈接
      title: '一路向北',   // 音樂標題
      coverImgUrl: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    },
    postId: 1
  },
  {    date: 'may 19 2018',
    title: '學科介紹',
    detail_img: '/images/detail/carousel/03.jpg',
    avatar: '/images/avatar/4.png',
    detail_content: '尚硅谷現開設JavaEE+大數據、HTML5前端+全棧、大數據+機器學習、Python+人工智能、Android+HTML5混合開發等多門學科；同時，通過視頻分享、谷粒學院在線課堂、直播課堂等多種方式，滿足了全國編程愛好者對多樣化學習場景的需求。目前，尚硅谷“谷粉”人數已超500萬，面授班學員絕大多數都在北上廣深等一線城市高薪就業，就業薪資更是屢創新高！',
    headImgSrc: '/images/detail/carousel/03.jpg',
    author: '綠巨人',
    dataTime: '24time',
    detail_love_image1: '/images/icon/chat.png',
    detail_love_image2: '/images/icon/view.png',
    love_count: 88,
    attention_count: 66,
    detail: '巨無霸教授。',
    music: {
      dataUrl: 'http://www.ytmp3.cn/down/50355.mp3', // 音樂鏈接
      title: '聽海',   // 音樂標題
      coverImgUrl: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    },
    postId: 2
  },
  {    date: '2018/3/15 下午 4:30:35',
    title: '賈靜雯簡介',
    detail_img: '/images/detail/list/j2.jpg',
    detail_content: '賈靜雯（Alyssa Chia），1974年10月7日出生于臺灣省臺北市，祖籍天津市，華語影視女演員、節目主持人。1990年，賈靜雯因接拍愛之味妞妞甜八寶廣告而出道演藝圈；同年，她還出演了個人的首部電視劇《佳家福》。1994年，賈靜雯開始擔任一系列兒童節目的主持人。1997年，她憑借家庭劇《四千金》獲得臺灣電視金鐘獎最佳新人獎[1]  。2000年，賈靜雯主演的古裝劇《飛龍在天》獲得了臺灣電視劇年度收視冠軍。',
    detail_love_image1: '/images/icon/chat.png',
    detail_love_image2: '/images/icon/view.png',
    love_count: 92,
    headImgSrc: '/images/detail/list/j2.jpg',
    author: '新華社',
    attention_count: 88,
    avatar: '/images/avatar/1.png',
    music: {
      dataUrl: 'http://up.mcyt.net/down/46101.mp3', // 音樂鏈接
      title: 'Sunset Jesus-Avicii',   // 音樂標題
      coverImgUrl: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    },
    postId: 3
  },
  {    date: '2018/3/17 下午3:30:35',
    title: '賈靜雯作品展',
    detail_img: '/images/detail/list/j3.jpg',
    detail_content: '2001年，賈靜雯將工作重心轉向內地，并主演了傳奇劇《大漢天子》。2002年，她憑借武俠劇《倚天屠龍記》在內地贏得更高關注度[2]  。2003年，賈靜雯獲得FHM全球百大性感美女亞洲區冠軍。2006年，他主演了現代劇《悲傷時唱首歌》。此后幾年，賈靜雯相繼出演了傳奇劇《太平公主秘史》、劇情片《不能說的夏天》等影視作品',
    detail_love_image1: '/images/icon/chat.png',
    detail_love_image2: '/images/icon/view.png',
    love_count: 88,
    attention_count: 66,
    headImgSrc: '/images/detail/list/j3.jpg',
    author: '新華社',
    avatar: '/images/avatar/2.png',
    music: {
      dataUrl: 'http://up.mcyt.net/down/46102.mp3', // 音樂鏈接
      title: '汪峰 - 兒時',   // 音樂標題
      coverImgUrl: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    },
    postId: 4
  },
  {    date: 'sep 19 2016',
    title: '娛樂新聞',
    detail_img: '/images/detail/list/j4.jpg',
    avatar: '/images/avatar/3.png',
    detail_content: '2014年，賈靜雯與小自己九歲的臺灣演員修杰楷相戀[41]  。2015年5月5日，賈靜雯的男友修杰楷在微博宣布了賈靜雯已身懷有孕的消息，并發出了他與賈靜雯和梧桐妹的兩張合照，隨后，賈靜雯轉發了此條微博并希望得到大家的祝福[42]  ；同年8月7日，賈靜雯以剖宮產方式生下了與修杰楷的第一個女兒“咘咘”，而此前兩人已正式注冊結婚[43]  。',
    headImgSrc: '/images/detail/list/j4.jpg',
    author: '李白3',
    detail_love_image1: '/images/icon/chat.png',
    detail_love_image2: '/images/icon/view.png',
    love_count: 88,
    attention_count: 66,
    detail: '女神。。。',
    music: {
      dataUrl: 'http://up.mcyt.net/down/46110.mp3', // 音樂鏈接
      title: '曲婉婷 - 我的歌聲里-(電視劇《在線愛》主題曲)',   // 音樂標題
      coverImgUrl: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    },
    postId: 5
  },
  {    date: 'sep 19 2016',
    title: '社會活動',
    detail_img: '/images/detail/list/j6.jpg',
    avatar: '/images/avatar/4.png',
    detail_content: '2012年，賈靜雯擔任公益大使，發起為弱勢兒童和青少年課后照護計劃，并為此次活動獻唱了個人單曲《許一個愿望》。2014年，賈靜雯參加了最終夢想年度時尚魅力女性頒獎盛典，并在典禮上獲得了親情天使獎[50] ',
    headImgSrc: '/images/detail/list/j6.jpg',
    author: '新華社',
    detail_love_image1: '/images/icon/chat.png',
    detail_love_image2: '/images/icon/view.png',
    love_count: 88,
    attention_count: 66,
    detail: '女神2。。。',
    music: {
      dataUrl: 'http://up.mcyt.net/down/46100.mp3', // 音樂鏈接
      title: 'IF-Ken Arai',   // 音樂標題
      coverImgUrl: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    },
    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='{{listArray}}' wx:key='{{index}}'>
    <view>
      <!-- 把數據item傳遞給模板,使用三點運算符的方式,模板那邊就可以直接用屬性名獲取數據了,不用再xxx.xxx來獲取數據 -->
      <template is='listTmp' data='{{...item}}'/>
    </view>
  </view>

在list-template.wxml模板獲取數據:

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

關于“小程序中怎么實現列表渲染”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。