WeChat アプレットでのリストレンダリングの実装コード-ミニプログラム開発-php.cn

ホームページ

WeChat アプレット

ミニプログラム開発

WeChat アプレットでのリストレンダリングの実装コード

不言

Sep 06, 2018 am 10:15 AM

リストのレンダリング WeChat アプレット

この記事の内容は、WeChat アプレットでのリストレンダリングの実装コードに関するものです。必要な方は参考にしていただければ幸いです。

テンプレートの準備ができたら、データを走査します。データがシミュレートされます。datas フォルダーに list-data.js ファイルがあります。これは、事前に準備されたデータです:
list-data.js:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

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 を使用して公開されます。 < code>require が導入されました

20180902130930104 .png あとは、ページ上のデータを走査するだけです。走査に wx:for と wx:key を使用すると、パフォーマンスが向上し、走査された各個人に固有の情報が提供されます。マーク、走査される各個人は item です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

<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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7807

Java チュートリアル

1645

CakePHP チュートリアル

1402

Laravel チュートリアル

1300

PHP チュートリアル

1236

Related knowledge

Xianyu WeChat ミニプログラムが正式に開始 Feb 10, 2024 pm 10:39 PM

Xianyu の公式 WeChat ミニプログラムが静かに開始されました。ミニプログラムでは、プライベートメッセージを投稿して購入者/販売者とコミュニケーションしたり、個人情報や注文を表示したり、商品を検索したりすることができます。プログラム、見てみましょう。 Xianyu WeChat アプレットの名前は何ですか? 回答: Xianyu、アイドル取引、中古品販売、評価、リサイクル。 1. ミニプログラムでは、アイドルメッセージの投稿、プライベートメッセージを介した購入者/販売者とのコミュニケーション、個人情報と注文の表示、指定された商品の検索などができます。 2. ミニプログラムページには、ホームページ、近くに、アイドル投稿、メッセージ投稿、私の投稿 5つの機能; 3. 使用したい場合は、購入する前に WeChat 支払いを有効にする必要があります。

WeChatアプレットは画像アップロード機能を実装 Nov 21, 2023 am 09:08 AM

WeChat アプレットが画像アップロード機能を実装モバイルインターネットの発展に伴い、WeChat アプレットは人々の生活に欠かせないものになりました。 WeChat ミニプログラムは、豊富なアプリケーションシナリオを提供するだけでなく、画像アップロード機能などの開発者定義の機能もサポートします。この記事では、WeChat アプレットに画像アップロード機能を実装する方法と具体的なコード例を紹介します。 1. 準備作業コードを書き始める前に、WeChat 開発者ツールをダウンロードしてインストールし、WeChat 開発者として登録する必要があります。同時に、WeChat についても理解する必要があります。

WeChat アプレットにドロップダウンメニュー効果を実装する Nov 21, 2023 pm 03:03 PM

WeChat ミニプログラムでドロップダウンメニュー効果を実装するには、特定のコードサンプルが必要です。モバイルインターネットの普及に伴い、WeChat ミニプログラムはインターネット開発の重要な部分となり、ますます多くの人が注目し始めています。 WeChat ミニプログラムを使用します。 WeChat ミニプログラムの開発は、従来の APP 開発よりも簡単かつ迅速ですが、特定の開発スキルを習得する必要もあります。 WeChat ミニプログラムの開発では、ドロップダウンメニューが一般的な UI コンポーネントであり、より良いユーザーエクスペリエンスを実現します。この記事では、WeChat アプレットにドロップダウンメニュー効果を実装し、実用的な機能を提供する方法を詳しく紹介します。

WeChat ミニプログラムに画像フィルター効果を実装する Nov 21, 2023 pm 06:22 PM

WeChat ミニプログラムでの画像フィルター効果の実装ソーシャルメディアアプリケーションの人気に伴い、人々は写真にフィルター効果を適用して、写真の芸術的効果や魅力を高めることがますます好まれています。画像フィルター効果は WeChat ミニプログラムにも実装でき、より興味深く創造的な写真編集機能をユーザーに提供します。この記事では、WeChat ミニプログラムに画像フィルター効果を実装する方法を紹介し、具体的なコード例を示します。まず、WeChat アプレットのキャンバスコンポーネントを使用して画像を読み込み、編集する必要があります。 Canvasコンポーネントはページ上で使用できます

Xianyu WeChat アプレットの名前は何ですか? Feb 27, 2024 pm 01:11 PM

Xianyu の公式 WeChat ミニプログラムが静かに開始され、アイドルアイテムを簡単に公開および交換できる便利なプラットフォームをユーザーに提供します。ミニプログラムでは、プライベートメッセージを介して購入者または販売者とコミュニケーションしたり、個人情報や注文を表示したり、欲しい商品を検索したりできます。では、WeChat ミニプログラムでは Xianyu とはいったい何と呼ばれているのでしょうか? このチュートリアルガイドで詳しくご紹介しますので、知りたいユーザーは、この記事に従って読み続けてください。 Xianyu WeChat アプレットの名前は何ですか? 回答: Xianyu、アイドル取引、中古品販売、評価、リサイクル。 1. ミニプログラムでは、アイドルメッセージの投稿、プライベートメッセージを介した購入者/販売者とのコミュニケーション、個人情報と注文の表示、指定された商品の検索などができます。 2. ミニプログラムページには、ホームページ、近くに、アイドル投稿、メッセージ投稿、マイ投稿の5つの機能、3．

WeChat アプレットを使用してカルーセル切り替え効果を実現する Nov 21, 2023 pm 05:59 PM

WeChat アプレットを使用してカルーセルスイッチング効果を実現する WeChat アプレットは、シンプルで効率的な開発と使用特性を備えた軽量のアプリケーションです。 WeChat ミニプログラムでは、カルーセルスイッチング効果を実現することが一般的な要件です。この記事では、WeChat アプレットを使用してカルーセル切り替え効果を実現する方法と、具体的なコード例を紹介します。まず、カルーセルコンポーネントを WeChat アプレットのページファイルに追加します。たとえば、<swiper> タグを使用すると、カルーセルの切り替え効果を実現できます。このコンポーネントでは、 b を渡すことができます。

WeChatミニプログラムにスライディング削除機能を実装する Nov 21, 2023 pm 06:22 PM

WeChat ミニプログラムにスライディング削除機能を実装するには、特定のコードサンプルが必要です。WeChat ミニプログラムの人気に伴い、開発者は開発プロセス中にいくつかの一般的な機能を実装する際に問題に遭遇することがよくあります。中でも、スライド削除機能は、よく使われる一般的な機能要件です。この記事では、WeChat アプレットにスライディング削除機能を実装する方法と具体的なコード例を詳しく紹介します。 1. 要件分析 WeChat ミニプログラムでは、スライド削除機能の実装には次の点が含まれます。リスト表示: スライドして削除できるリストを表示するには、各リスト項目に次の要素が含まれている必要があります。

WeChat アプレットに画像回転効果を実装する Nov 21, 2023 am 08:26 AM

WeChat ミニプログラムで画像回転効果を実装するには、特定のコードサンプルが必要です。WeChat ミニプログラムは、ユーザーに豊富な機能と優れたユーザーエクスペリエンスを提供する軽量のアプリケーションです。ミニプログラムでは、開発者はさまざまなコンポーネントと API を使用して、さまざまな効果を実現できます。その中で、画像回転効果は、ミニプログラムに興味と視覚効果を加えることができる一般的なアニメーション効果です。 WeChat ミニプログラムで画像の回転効果を実現するには、ミニプログラムが提供するアニメーション API を使用する必要があります。以下は、その方法を示す具体的なコード例です。

See all articles

WeChat アプレットでのリスト レンダリングの実装コード

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

WeChat アプレットでのリストレンダリングの実装コード