微信小程序template使用
当您的项目需要多次使用同一个布局和样式的时候,您就可以考虑使用template(模板)来减少冗余代码。
使用方式:
1.新建一个template文件夹来存放您的通用模板;
2.在文件夹里面新建一个wxml,wxss,进行模板和样式的定义;
3.设置模板的name,以及里面您需要定义的wxml内容;
4.设置wxss样式;
5.在需要使用的页面使用import导入该wxml页面,注意路径位置;
6.在需要使用的wxss文件导入该wxss;
7.在页面上使用该模板,通过is判断使用哪个模板,这里我们使用name为courseStudent模板(此处使用的是列表循环,所以data值为item);
若将data使用ES6 展开运算符‘...’,则模板里面绑定数据就不需要在前面加入item了
<!--使用ES6展开运算符 -->
<template is="courseStudent" data="{{...item}}"></template> <template name="courseStudent">
<!-- 此处渲染数据的时候就不需要使用 item.xxx了-->
<view>{{courseName}}</view>
</template>
微信小程序template使用的更多相关文章
- 微信小程序 template模板使用
参考文章: 微信小程序-template模板使用
- 微信小程序template模板与component组件的区别和使用
前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...
- 微信小程序 template添加点击事件
介绍template是微信小程序提供的模板,可以在模板中定义代码片段,然后在不同的地方调用. 简单使用定义template因为项目中可能会需要到不止一个template,所以最好新建一个文件夹来存放t ...
- 微信小程序——template详细使用
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用减少冗余代码. 1.1定义模板 1.1.1.创建模板文件夹 1.1.2.使用 name 属性,作为模板的名字.然后 ...
- 微信小程序template富文本插件image宽度被js强制设置
这段时间一直做微信小程序,过程中遇到了一个问题,这个问题一直没有得到完美的解决. 问题描述: 在Web编程中经常会引入template插件,这个插件是封装好,我们通常的做法是直接引入,配置简单,好用, ...
- .NET开发微信小程序-Template模块开发
1.添加一个文件目录,里面放模板信息 例:我在根目录添加一个文件夹:template 然后在这个文件夹下面添加相应的页面.比如我添加一个promodel.wxml文件.主要是放商品相关的模块信息(注: ...
- 微信小程序——template的使用方法
今天需要做一个[我的订单]页面,订单有几种状态,觉得把订单列表封装成一个模板更好.下面讲一下,如何用小程序自带的template构建一个模板. 1.构建订单列表模板页,命名为 [order.wxml] ...
- 转发:微信小程序-template模板使用
转载于CSDN--[向朔1992]处.(部分内容根据实际情况有所修改) 小程序实现主页面调用次级页面的wxml页面内容,如下图: 根据上图,我们可以将图片和图片信息作为一个goodsList.wx ...
- [转]微信小程序-template模板使用
本文转自:http://blog.csdn.net/u013778905/article/details/59646241 如下图,我在做华企商学院小程序的时候,课程搜索结果页和课程列表页结构是完全一 ...
- 微信小程序 - template和include详细描述
演示 index.wxml <!-- 内部模板 --> <template name="all"> {{a}} {{b}} </template> ...
随机推荐
- USACO Hamming Codes
题目大意:求n个两两hamming距离大于等于d的序列,每个元素是一个b bit的数 思路:仍然暴力大法好 /*{ ID:a4298442 PROB:hamming LANG:C++ } */ #in ...
- lua学习随笔
1.1 Chunks 1.2 全局变量 访问一个没有初始化的全局变量也不会出错,只不过的到的结果是nil 如果想删除一个全局变量,只需要将变量赋值为nil 1.3 词法约定 标识符 保留字不能作为 ...
- 转载: GMM-HMM学习笔记
转载地址:http://blog.csdn.net/davidie/article/details/46929269 最近几天钻研了语音处理中的GMM-HMM模型,阅读了一些技术博客和学术论文,总算是 ...
- jmeter录制接口以及并发测试
http://jingyan.baidu.com/article/15622f2475601dfdfdbea548.html
- HDU4768:Flyer [ 二分的奇妙应用 好题 ]
传送门 Flyer Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- java基础之IO流(二)之字符流
java基础之IO流(二)之字符流 字符流,顾名思义,它是以字符为数据处理单元的流对象,那么字符流和字节流之间的关系又是如何呢? 字符流可以理解为是字节流+字符编码集额一种封装与抽象,专门设计用来读写 ...
- Spring注入内部的Beans
以下内容引用自http://wiki.jikexueyuan.com/project/spring/injecting-inner-beans.html: 如你所知,Java内部类在其他类的范围内定义 ...
- gcc、arm-Linux-gcc和arm-elf-gcc的组成及区别
2017-01-19 嵌入式ARM 嵌入式ARM 一.GCC简介 The GNU Compiler Collection,通常简称 GCC,是一套由 GNU 开发的编译器集,为什么是编辑器集而不是编译 ...
- 彻底理解javascript 中的事件对象的pageY, clientY, screenY的区别和联系。
说到底, pageY, clientY, screenY的计算,就是要找到参考点, 它们的值就是: 鼠标点击的点----------- 和参考点指点----------的直角坐标系的距离 stacko ...
- 前端高频面试题 CSS篇
通过从网上看到的面经,总结的一些高频的前端CSS面试题,有很多不会,于是找资料,并通过代码实现,自己提供了一些参考答案. 目录 1.怎样会产生浮动? 2.如何清除浮动? 3.盒子模型,以及IE和其他浏 ...