91av视频免费在线观看,免费观看亚洲人成网站,久久w5ww成w人免费

導(dǎo)讀微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用，也是一...

微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用，也是一項(xiàng)門檻非常高的創(chuàng)新，經(jīng)過將近兩年的發(fā)展，已經(jīng)構(gòu)造了新的小程序開發(fā)環(huán)境和開發(fā)者生態(tài)。

本篇文章給大家?guī)淼膬?nèi)容是關(guān)于微信小程序中列表渲染的實(shí)現(xiàn)代碼，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

模板弄好了,就要遍歷數(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教育隸屬于北京晟程華科教育科技有限公司，是國內(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: '美國隊(duì)長',
    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é)院在線課堂、直播課堂等多種方式，滿足了全國編程愛好者對(duì)多樣化學(xué)習(xí)場景的需求。目前，尚硅谷“谷粉”人數(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: '賈靜雯簡介',
    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è)女兒“咘咘”，而此前兩人已正式注冊結(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ā)起為弱勢兒童和青少年課后照護(hù)計(jì)劃，并為此次活動(dòng)獻(xiàn)唱了個(gè)人單曲《許一個(gè)愿望》。2014年，賈靜雯參加了最終夢想年度時(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

 <!-- 
在組件上使用 wx:for 控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。
默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 item 
-->
  <view wx:for='{{listArray}}' wx:key='{{index}}'>
    <view>
      <!-- 把數(shù)據(jù)item傳遞給模板,使用三點(diǎn)運(yùn)算符的方式,模板那邊就可以直接用屬性名獲取數(shù)據(jù)了,不用再xxx.xxx來獲取數(shù)據(jù) -->
      <template is='listTmp' data='{{...item}}'/>
    </view>
  </view>

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

<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>

相關(guān)推薦：

node.js微信公眾平臺(tái)開發(fā)教程_node.js

提高CSS網(wǎng)頁渲染效率的11點(diǎn)注意事項(xiàng)_經(jīng)驗(yàn)交流

以上就是微信小程序中列表渲染的實(shí)現(xiàn)代碼的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應(yīng)用。

溫馨提示：喜歡本站的話，請(qǐng)收藏一下本站！

當(dāng)前位置:雨林木風(fēng)下載站 > 應(yīng)用軟件教程 > 詳細(xì)頁面

微信小程序中下文渲染的完成代碼

本類教程下載

系統(tǒng)下載排行