微信小程式-列表渲染

模板弄好了,就要遍歷資料了
資料是模擬好的,在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>

結果圖: