집 >위챗 애플릿 >미니 프로그램 개발 >WeChat 애플릿의 목록 렌더링을 위한 구현 코드

WeChat 애플릿의 목록 렌더링을 위한 구현 코드

不言원래의: 2018-09-06 10:15:145203검색

이 기사의 내용은 WeChat 애플릿의 목록 렌더링 구현 코드에 관한 것입니다. 이는 특정 참고 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

템플릿이 준비되면 데이터를 탐색할 시간입니다.
데이터가 시뮬레이션됩니다. datas 폴더에 list-data.js 파일이 있습니다.
list-data.js:

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.net/down/46100.mp3&#39;, // 音乐链接
      title: &#39;IF-Ken Arai&#39;,   // 音乐标题
      coverImgUrl: &#39;http://y.gtimg.cn/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.cn/down/50395.mp3&#39;, // 音乐链接
      title: &#39;一路向北&#39;,   // 音乐标题
      coverImgUrl: &#39;http://y.gtimg.cn/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.cn/down/50355.mp3&#39;, // 音乐链接
      title: &#39;听海&#39;,   // 音乐标题
      coverImgUrl: &#39;http://y.gtimg.cn/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.net/down/46101.mp3&#39;, // 音乐链接
      title: &#39;Sunset Jesus-Avicii&#39;,   // 音乐标题
      coverImgUrl: &#39;http://y.gtimg.cn/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.net/down/46102.mp3&#39;, // 音乐链接
      title: &#39;汪峰 - 儿时&#39;,   // 音乐标题
      coverImgUrl: &#39;http://y.gtimg.cn/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.net/down/46110.mp3&#39;, // 音乐链接
      title: &#39;曲婉婷 - 我的歌声里-(电视剧《在线爱》主题曲)&#39;,   // 音乐标题
      coverImgUrl: &#39;http://y.gtimg.cn/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.net/down/46100.mp3&#39;, // 音乐链接
      title: &#39;IF-Ken Arai&#39;,   // 音乐标题
      coverImgUrl: &#39;http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000&#39;,
    },
    postId: 6
  },];

module.exports = {list_data};

list.wxml 페이지에서 데이터를 사용하기 때문에 list.js에 도입하고 module.exports를 이용해 노출하고, require도입됨 list.wxml这个页面中用到数据,所以在list.js中引入
用module.exports暴露,用require引入
WeChat 애플릿의 목록 렌더링을 위한 구현 코드 然后在页面遍历数据就可以了
遍历用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 20180902130930104 .png 그런 다음 페이지의 데이터를 순회하면 됩니다. 순회에 wx:for 및 wx:key를 사용하여 성능을 향상하고 순회된 각 개인에 대한 고유한 정보를 제공하세요. . Mark, 통과된 각 개별은 item

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

list-template.wxml 템플릿에서 데이터 가져오기:

rrreee

관련 권장 사항:
node.js WeChat Public 플랫폼 개발 tutorial_node.js

11 CSS 웹 페이지 렌더링 효율성 향상에 대한 주의 사항_경험 교환🎜🎜

위 내용은 WeChat 애플릿의 목록 렌더링을 위한 구현 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

node.js css for require JS 微信小程序

성명：

이전 기사：WeChat 미니 프로그램에서 사용자 정의 공유 버튼 구현 프로세스다음 기사：WeChat 미니 프로그램에서 사용자 정의 공유 버튼 구현 프로세스