转载于CSDN--【向朔1992】处。(部分内容根据实际情况有所修改)

小程序实现主页面调用次级页面的wxml页面内容,如下图:

 

根据上图,我们可以将图片和图片信息作为一个goodsList.wxml 次页面,然后整个页面当做主页面home.wxml页;

模板

一、定义模板

1、新建一个template文件夹用来管理项目中所有的模板; 
2、新建一个courseList.wxml文件来定义模板; 
3、使用name属性,作为模板的名字。然后在<template/>内定义代码片段。

下面是goodsList.wxml代码:区分左右两边的数据的是下面第二行的三元运算符

<template name="goodsList">
<view class="goods-item{{index % 2 == 0?' odd':''}}">
<view class="goods">
<view class="goods-tag ten" />
<navigator url="../xiangqing/xiangqing">
<image class="goods-image" src="{{goods.goods.imgUrl}}" />
</navigator>
<view class="desc-wrapper">
<view class="goods-desc">{{goods.goods.name}}</view>
</view>
</view>
<view class="operating">
<view class="tips">状态<span>{{goods.takeRate * 100}}%</span></view>
<view class="progress" style="width: calc(100% - 76px);"></view>
<view class="progress-take" style="width: calc((100% - 76px) * {{goods.takeRate}} );"></view>
<view class="btn">加入清单</view>
</view>
</view>
</template>

二、使用模板

1、使用 <import scr=" "> 标签,在主页面引入需要使用的次级模板wxml

2、将模板所需要的 data 传入(这里的数据,我们在home.js文件中定义好),一般我们都会使用列表渲染。

<import src="tpl/goodsList.wxml"/>
<block wx:for="{{goodsList}}">
<template is="goodsList" data="{{index:index,goods:item}}"/>
</block>

解释:1)首先引入次级模板文件,然后像普通的后台语言如php的模板引擎一样,wx:for也可以看成是一个模板引擎,wx:for就是解析数组,循环打印变量。

2)is作用就是确认引用模板,item就是数组的当前变量,index就是数组元素的下标。

3)上面的wx:for="{{goodsList}}",是js文件的多维数组数据,不是模板文件名,这里很重要。

4)当然,你也可以这样写:

<import src="tpl/goodsList.wxml"/>
<block wx:for="{{goodsList}}">
<template is="goodsList" data="{{...item}}"/>
</block>

data 是要模板渲染的数据,data="{{...item}}" 写法是ES6的写法,itemwx:for当前项,... 是展开运算符,在模板中不需要再{{item.goods}} 而是直接{{goods}} 。

三、模板样式

1、在新建模板的时候同时新建一个courseList.wxss 的文件,与CSS同样的写法控制样式。 
2、在需要使用模板的页面 .wxss文件中import进来;或者直接在app.wxss中引入,这样只需要一次引入,其他文件就不用引入了。

@import "../template/courseList.wxss";  

四、主页面home.wxml示例:

...
<view class="sort-panel" style="position:{{sortPanelPos}};top:{{sortPanelTop}}px">
<view class="sort-item comb on">人气</view>
<view class="sort-item">最新</view>
<view class="sort-item">进度</view>
<view class="sort-item">
</view>
</view>
<view class="goods-panel">
<import src="tpl/goodsList.wxml"/>
<block wx:for="{{goodsList}}">
<template is="goodsList" data="{{index:index,goods:item}}"/>
</block>
</view>
...

转发:微信小程序-template模板使用的更多相关文章

  1. 微信小程序 template模板使用

    参考文章: 微信小程序-template模板使用

  2. 微信小程序template模板与component组件的区别和使用

    前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...

  3. [转]微信小程序-template模板使用

    本文转自:http://blog.csdn.net/u013778905/article/details/59646241 如下图,我在做华企商学院小程序的时候,课程搜索结果页和课程列表页结构是完全一 ...

  4. 微信小程序-template模板

    ============================= 构建template模板                    ============================= 1.分析得出共为 ...

  5. 微信小程序发送模板消息

    微信小程序发送模板消息 标签(空格分隔): php 看小程序文档 [模板消息文档总览]:https://developers.weixin.qq.com/miniprogram/dev/framewo ...

  6. 微信小程序开发--模板(template)使用,数据加载,点击交互

    微信小程序视图层提供了 模板(template),可以在模板中定义代码片段,然后在不同的地方调用.结果在数据渲染那懵逼了.按照官网上对模板的说明和对数据的加载. 1.定义模板 使用name属性,作为模 ...

  7. 微信小程序开发——模板中加载html代码

    最新方法可以使用微信小程序提供的 rich-text (富文本)组件直接写解析html,详见 rich-text: <rich-text class='f13 c_9' nodes=" ...

  8. 微信小程序 template添加点击事件

    介绍template是微信小程序提供的模板,可以在模板中定义代码片段,然后在不同的地方调用. 简单使用定义template因为项目中可能会需要到不止一个template,所以最好新建一个文件夹来存放t ...

  9. 微信小程序——template详细使用

    WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用减少冗余代码. 1.1定义模板 1.1.1.创建模板文件夹  1.1.2.使用 name 属性,作为模板的名字.然后 ...

随机推荐

  1. CentOS 6.5安装配置Nginx

    Ubuntu下安装nginx,直接apt-get install nginx就行了,很方便. 但是今天装了CentOS6.5,直接yum install nginx不行,要先处理下源,下面是安装完整流 ...

  2. Arduino + SmartAirFilter 制作智能感应的 PM 空气净化器

    先说 SmartAirFilters 知道 SmartAirFilters 源自微博上转发的非常火的那个帖子,和动辄七八千元的商用产品比,几百元的 SmartAirFilters(下面简称电扇) 确实 ...

  3. 读书笔记之:C语言深度剖析

    读书笔记之:C语言深度剖析 <C 语言深度解剖>这本书是一本“解开程序员面试笔试的秘密”的好书.作者陈正冲老师提出“以含金量勇敢挑战国内外同类书籍”,确实,这本书中的知识点都是一些在面试中 ...

  4. Spark Streaming的编程模型

    Spark Streaming的编程和Spark的编程如出一辙,对于编程的理解也非常类似.对于Spark来说,编程就是对于RDD的操作:而对于Spark Streaming来说,就是对DStream的 ...

  5. 第一章 EL表达式常见用法

    el最常用的几种使用场景: 从配置文件中读取属性 缺失值情况下,配置默认值 el内部字符串使用String的方法 三目运算符 正则表达式 注入系统属性(system properties) 调用系统原 ...

  6. Vulkan --vulkan in powervr

    zhankeng 跨平台 多线程 low cpu overhead object orientated vulkan有利于tile based的地方 明确依赖声明 细粒度同步 render passe ...

  7. Visual Studio 调试方法

    1:命令窗口 CTRL + D + I,可以在立即窗口中写一些临时的代码 2:编辑并继续 选中下面的选项,可以让你在调试暂停中,修改代码,而不用重新启动, 3:执行 单步执行:F10 跳进方法:F11 ...

  8. 远程訪问路由器下的mac os(ssh+vnc)

    需求: 使用能够上网的外网pc(win7操作系统).远程訪问公网tp-link下的的mac电脑 环境: mac os -----tp-link-----------pc 工具: putty   Tig ...

  9. scala多线程

    object Test { def main(args: Array[String]) { //创建线程池 val threadPool:ExecutorService=Executors.newFi ...

  10. hdu 4491 Windmill Animation

    A windmill animation works as follows: A two-dimensional set of points, no three of which lie on a l ...