微信小程序实现给嵌套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实现代码[IE暂不支持]
May 24 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
基于node.js之调试器详解
Aug 22 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 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读取目录及子目录下所有文件名的方法
2014/10/20 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
smarty模板数学运算示例
2016/12/11 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
python识别验证码的思路及解决方案
2020/09/13 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
2015年母亲节寄语
2015/03/23 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python
redis复制有可能碰到的问题汇总
2022/04/03 Redis
Golang入门之计时器
2022/05/04 Golang