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


Posted in Javascript onDecember 18, 2017

本文实例总结了微信小程序实现给嵌套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的写法,同第一种。

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

Javascript 相关文章推荐
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
js实现微信聊天效果
Aug 09 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 #Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 #Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 #Javascript
javaScript中的空值和假值
Dec 18 #Javascript
浅谈Webpack自动化构建实践指南
Dec 18 #Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 #Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 #Javascript
You might like
php 信息采集程序代码
2009/03/17 PHP
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
比较完整的微信开发php代码
2016/08/02 PHP
php实用代码片段整理
2016/11/12 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
Python实现豆瓣图片下载的方法
2015/05/25 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
详解Python字典小结
2018/10/20 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
Python高并发和多线程有什么关系
2020/11/14 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
美国最大点评网站:Yelp
2018/02/14 全球购物
计算机应用专业毕业生求职信
2013/10/24 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
体育口号大全
2014/06/18 职场文书
读群众路线的心得体会
2014/09/03 职场文书
个人合作协议范本
2015/08/06 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android