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

嘉蔭網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),嘉蔭網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為嘉蔭超過千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的嘉蔭做網(wǎng)站的公司定做！

模板弄好了,就要遍歷數(shù)據(jù)了
數(shù)據(jù)是模擬好的,在datas文件夾中有l(wèi)ist-data.js文件,這就是提前準(zhǔn)備好的數(shù)據(jù):
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: '讓每一個(gè) IT 人，都直接或間接地受到過尚硅谷幫助！尚硅谷由一群有活力、有理想、有責(zé)任、有擔(dān)當(dāng)?shù)纳泄韫热私M成，我們將不負(fù)青春，為傳播 IT 技術(shù)、為軟件行業(yè)的健康的生態(tài)發(fā)展貢獻(xiàn)力量。',
    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: '鋼鐵戰(zhàn)隊(duì)。。',
    music: {
      dataUrl: 'http://up.mcyt.net/down/46100.mp3', // 音樂鏈接
      title: 'IF-Ken Arai',   // 音樂標(biāo)題
      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教育隸屬于北京晟程華科教育科技有限公司，是國(guó)內(nèi)領(lǐng)先的專業(yè)IT教育培訓(xùn)機(jī)構(gòu)，擁有北京、深圳兩處基地。自2013年成立以來，憑借領(lǐng)先的教育理念、前沿的課程體系、優(yōu)秀的教學(xué)團(tuán)隊(duì)、科學(xué)的考評(píng)制度、嚴(yán)格的教務(wù)管理、完備的就業(yè)保障，已經(jīng)為行業(yè)輸送了萬余名高端技術(shù)人才。',
    headImgSrc: '/images/detail/carousel/01.jpg',
    author: '美國(guó)隊(duì)長(zhǎng)',
    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: '一路向北',   // 音樂標(biāo)題
      coverImgUrl: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    },
    postId: 1
  },
  {    date: 'may 19 2018',
    title: '學(xué)科介紹',
    detail_img: '/images/detail/carousel/03.jpg',
    avatar: '/images/avatar/4.png',
    detail_content: '尚硅谷現(xiàn)開設(shè)JavaEE+大數(shù)據(jù)、HTML5前端+全棧、大數(shù)據(jù)+機(jī)器學(xué)習(xí)、Python+人工智能、Android+HTML5混合開發(fā)等多門學(xué)科；同時(shí)，通過視頻分享、谷粒學(xué)院在線課堂、直播課堂等多種方式，滿足了全國(guó)編程愛好者對(duì)多樣化學(xué)習(xí)場(chǎng)景的需求。目前，尚硅谷“谷粉”人數(shù)已超500萬，面授班學(xué)員絕大多數(shù)都在北上廣深等一線城市高薪就業(yè)，就業(yè)薪資更是屢創(chuàng)新高！',
    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: '聽海',   // 音樂標(biāo)題
      coverImgUrl: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    },
    postId: 2
  },
  {    date: '2018/3/15 下午 4:30:35',
    title: '賈靜雯簡(jiǎn)介',
    detail_img: '/images/detail/list/j2.jpg',
    detail_content: '賈靜雯（Alyssa Chia），1974年10月7日出生于臺(tái)灣省臺(tái)北市，祖籍天津市，華語影視女演員、節(jié)目主持人。1990年，賈靜雯因接拍愛之味妞妞甜八寶廣告而出道演藝圈；同年，她還出演了個(gè)人的首部電視劇《佳家?！?。1994年，賈靜雯開始擔(dān)任一系列兒童節(jié)目的主持人。1997年，她憑借家庭劇《四千金》獲得臺(tái)灣電視金鐘獎(jiǎng)最佳新人獎(jiǎng)[1]  。2000年，賈靜雯主演的古裝劇《飛龍?jiān)谔臁帆@得了臺(tái)灣電視劇年度收視冠軍。',
    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',   // 音樂標(biāo)題
      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年，賈靜雯將工作重心轉(zhuǎn)向內(nèi)地，并主演了傳奇劇《大漢天子》。2002年，她憑借武俠劇《倚天屠龍記》在內(nèi)地贏得更高關(guān)注度[2]  。2003年，賈靜雯獲得FHM全球百大性感美女亞洲區(qū)冠軍。2006年，他主演了現(xiàn)代劇《悲傷時(shí)唱首歌》。此后幾年，賈靜雯相繼出演了傳奇劇《太平公主秘史》、劇情片《不能說的夏天》等影視作品',
    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: '汪峰 - 兒時(shí)',   // 音樂標(biāo)題
      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年，賈靜雯與小自己九歲的臺(tái)灣演員修杰楷相戀[41]  。2015年5月5日，賈靜雯的男友修杰楷在微博宣布了賈靜雯已身懷有孕的消息，并發(fā)出了他與賈靜雯和梧桐妹的兩張合照，隨后，賈靜雯轉(zhuǎn)發(fā)了此條微博并希望得到大家的祝福[42]  ；同年8月7日，賈靜雯以剖宮產(chǎn)方式生下了與修杰楷的第一個(gè)女兒“咘咘”，而此前兩人已正式注冊(cè)結(jié)婚[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: '曲婉婷 - 我的歌聲里-(電視劇《在線愛》主題曲)',   // 音樂標(biāo)題
      coverImgUrl: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    },
    postId: 5
  },
  {    date: 'sep 19 2016',
    title: '社會(huì)活動(dòng)',
    detail_img: '/images/detail/list/j6.jpg',
    avatar: '/images/avatar/4.png',
    detail_content: '2012年，賈靜雯擔(dān)任公益大使，發(fā)起為弱勢(shì)兒童和青少年課后照護(hù)計(jì)劃，并為此次活動(dòng)獻(xiàn)唱了個(gè)人單曲《許一個(gè)愿望》。2014年，賈靜雯參加了最終夢(mèng)想年度時(shí)尚魅力女性頒獎(jiǎng)盛典，并在典禮上獲得了親情天使獎(jiǎng)[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',   // 音樂標(biāo)題
      coverImgUrl: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    },
    postId: 6
  },];

module.exports = {list_data};

因?yàn)橐?code>list.wxml這個(gè)頁面中用到數(shù)據(jù),所以在list.js中引入
用module.exports暴露,用require引入
然后在頁面遍歷數(shù)據(jù)就可以了
遍歷用wx:for,wx:key是提高性能的,為每個(gè)遍歷的個(gè)體提供唯一標(biāo)示,遍歷出來的每個(gè)個(gè)體是item

在list-template.wxml模板獲取數(shù)據(jù):

  
    
    {{date}}
  
  {{title}}
  
  {{detail_content}}
  
    
    {{love_count}}
    
    {{attention_count}}
  

關(guān)于“小程序中怎么實(shí)現(xiàn)列表渲染”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。