微信小程序实现给嵌套template模板传递数据的方式总结

作者:anLazyAnt 时间:2024-05-22 10:31:50 

本文实例总结了微信小程序实现给嵌套template模板传递数据的方式。分享给大家供大家参考,具体如下:

一、template模板调用的数据是单一形态时:

indexTemplate模板:


<import src="../lookAndCollect-template/lookAndCollect-template.wxml" />
<template name="indexTemplate">
<view class="user-info">
 <image class="avatar" src="{{avatar}}"></image>
 <text class="name">{{name}}</text>
 <text class="date">{{date}}</text>
</view>
<view class="news">
 <text class="news-title">{{title}}</text>
 <image class="news-img" src="{{newsImg}}"></image>
 <text class="news-content">{{content}}</text>
</view>
<template is="reviewAndCollect" data="{{review,look}}"></template>
</template>

lookAndCollect模板:


<template name="lookAndCollect-template">
<view class="lookAndCollect-template">
 <view class="lookAndCollect-template-review">
  <image src="/smallApp/images/icon/view.png"></image>
  <text>{{look}}</text>
 </view>
 <view class="lookAndCollect-template-look">
  <image src="/smallApp/images/icon/chat.png"></image>
  <text>{{collect}}</text>
 </view>
</view>
</template>

indexTemplate模板在index.wxml中的引用:


 <block wx:for="{{newsData}}" wx:for-item="newsItem">
  <view class="item">
   <template is="indexTemplate" data="{{...newsItem}}" />
  </view>
 </block>

index.wxml对应的index.js写法:


var newsDataList = require("../index-data.js");
Page({
 data: {
 },
 onLoad: function (option) {
   this.setData({
     newsData: newsDataList.dataList
   });
 }
})

模板中使用单一形式的数据:


var news_data = [
 {
   listId: "0",
   avatar: "/smallApp/images/avatar/1.png",
   name: "我是大猫猫",
   date: "16分钟前",
   title: "搞事情?法国招聘新特工 会汉语成必备条件",
   newsImg: "/smallApp/images/post/crab.png",
   content: "是的,你没看错,据法国《费加罗报》报道,法国境外安全总局(DGSE)欲在2019年前招募600名新特工,而且新的特工必须年轻、有高等文凭,会多国语言,并且熟悉电脑与互联网。",
   review: "0",
   look: "30"
 },
 {
   listId: "1",
   avatar: "/smallApp/images/avatar/2.png",
   name: "风口上的猪",
   date: "1天前",
   title: "顺丰控股上市次日盘中涨停 离首富差4个涨停",
   newsImg: "/smallApp/images/post/bl.png",
   content: "根据之前借壳方鼎泰新材发布的公告,该公司定增完成后,第一大股东将变更为深圳明德控股发展有限公司(简称“明德控股”),持股比例为64.58%,后4名分别为宁波顺达丰润投资管理合伙企业(有限合伙)…",
   review: "100",
   look: "380"
 }
];
module.exports = {
 dataList: news_data
}

如果需要在嵌套的模板中传入多个数据,可以将每个数据用逗号隔开。

二、嵌套模板调用包括object对象时的调用方法:

模板中使用的数据review和look以对象的形式呈现时:


var news_data = [
 {
   listId: "0",
   avatar: "/smallApp/images/avatar/1.png",
   name: "我是大猫猫",
   date: "16分钟前",
   title: "搞事情?法国招聘新特工 会汉语成必备条件",
   newsImg: "/smallApp/images/post/crab.png",
   content: "是的,你没看错,据法国《费加罗报》报道,法国境外安全总局(DGSE)欲在2019年前招募600名新特工,而且新的特工必须年轻、有高等文凭,会多国语言,并且熟悉电脑与互联网。",
   reviewAndCollect {
     review: "0",
     look: "30"
   }
 },
 {
   listId: "1",
   avatar: "/smallApp/images/avatar/2.png",
   name: "风口上的猪",
   date: "1天前",
   title: "顺丰控股上市次日盘中涨停 离首富差4个涨停",
   newsImg: "/smallApp/images/post/bl.png",
   content: "根据之前借壳方鼎泰新材发布的公告,该公司定增完成后,第一大股东将变更为深圳明德控股发展有限公司(简称“明德控股”),持股比例为64.58%,后4名分别为宁波顺达丰润投资管理合伙企业(有限合伙)…",
   reviewAndCollect {
     review: "120",
     look: "300"
   }
 }
];
module.exports = {
 dataList: news_data
}

indexTemplate模板


<import src="../lookAndCollect-template/lookAndCollect-template.wxml" />
<template name="indexTemplate">
<view class="user-info">
 <image class="avatar" src="{{avatar}}"></image>
 <text class="name">{{name}}</text>
 <text class="date">{{date}}</text>
</view>
<view class="news">
 <text class="news-title">{{title}}</text>
 <image class="news-img" src="{{newsImg}}"></image>
 <text class="news-content">{{content}}</text>
</view>
<template is="reviewAndCollect" data="{{reviewAndCollect}}"></template>
</template>

lookAndCollect模板:


<template name="lookAndCollect-template">
<view class="lookAndCollect-template">
 <view class="lookAndCollect-template-review">
  <image src="/smallApp/images/icon/view.png"></image>
  <text>{{reviewAndCollect.look}}</text>
 </view>
 <view class="lookAndCollect-template-look">
  <image src="/smallApp/images/icon/chat.png"></image>
  <text>{{reviewAndCollect.collect}}</text>
 </view>
</view>
</template>

ps: indexTemplate模板在index.wxml中的引用,以及index.wxml对应的index.js的写法,同第一种。

希望本文所述对大家微信小程序开发有所帮助。

来源:http://blog.csdn.net/anlazyant/article/details/60754601

标签:微信小程序,template模板,传递数据
0
投稿

猜你喜欢

  • Python断言assert的用法代码解析

    2021-10-05 21:57:07
  • 从零学python系列之从文件读取和保存数据

    2021-02-11 01:51:29
  • Python 利用argparse模块实现脚本命令行参数解析

    2022-12-01 16:11:55
  • Python完整实现俄罗斯方块游戏全解

    2022-10-23 16:52:52
  • 科学设计你的网站网页

    2008-03-16 13:48:00
  • 通过实例解析Python RPC实现原理及方法

    2022-06-19 00:50:38
  • python 计算一个字符串中所有数字的和实例

    2022-07-19 01:42:33
  • sql中case语句的用法浅谈

    2024-01-28 07:52:37
  • vue日期时间工具类详解

    2024-06-07 16:06:22
  • Python使用multiprocessing创建进程的方法

    2022-08-03 14:09:21
  • Shell脚本中通过正则表达式匹配IP地址

    2023-06-13 16:32:18
  • python绘制浅色范围曲线的示例代码

    2021-07-03 02:34:10
  • python写入文件自动换行问题的方法

    2022-06-13 11:28:18
  • Python绘制堆叠柱状图的实例

    2022-01-04 06:14:55
  • Python高级数据分析之pandas和matplotlib绘图

    2022-11-06 05:36:16
  • Python+PyQT5的子线程更新UI界面的实例

    2022-06-09 10:39:02
  • Ubuntu16安装Python3.9的实现步骤

    2021-01-23 14:04:53
  • python基础教程之面向对象的一些概念

    2022-12-01 09:51:52
  • 微信小程序搭建及解决登录失败问题

    2023-06-28 09:51:49
  • ASP 读取MP3文件帧的信息比特率,采样频率,播放时间

    2010-06-04 12:22:00
  • asp之家 网络编程 m.aspxhome.com