微信小程序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> ...
随机推荐
- 【NOI2012】骑行川藏
获得成就:第一次在信竞做神仙数学题 先放个前言,$OI$ 出大型数学题还是比较麻烦的,因为主要是考你数学推导 / 手算式子,你算出来之后把公式套个板子,就得到结论——$OI$ 的大型数学题的代码都是板 ...
- Java 面试参考指南 — 同步
同步 在多线程程序中,同步修饰符用来控制对临界区代码的访问.其中一种方式是用synchronized关键字来保证代码的线程安全性.在Java中,synchronized修饰的代码块或方法不会被多个线程 ...
- POJ3744 Scout YYF I (矩阵优化的概率DP)
Scout YYF I YYF is a couragous scout. Now he is on a dangerous mission which is to penetrate into th ...
- JS return false 与 return true
在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页. Return False 就相当于终止符 ...
- 能量项链(codevs 1154)
题目描述 Description 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对于相邻的两颗珠子 ...
- Lumia 1020 诞生:诺基亚拍照技术的一次狂欢
它在手机发展史上留下一长串坚实的脚印,拥趸遍及世界.它从巅峰滑落,但从未放弃向过去致敬的机会. 2002 年,作为世界上第一款内置摄像头拍照手机,诺基亚 7650 的横空出世将手机行业硬生生推上一个新 ...
- ReSharper7.1.25.234 注册机
经常用vs做开发的人都知道,ReSharper是vistual studio必备插件之一.他的智能提示,智能感知,.net底层方法查看,测试等都非常方便,给程序员带来了巨大的效率. 但众所周知ReSh ...
- Java面试题集(二)
51.设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1,写出程序. 以下程序使用内部类实现线程,对j增减的时候没有考虑顺序问题. public class ThreadTest1 ...
- hdu 4857 逆拓扑+大根堆(priority_queue)
题意:排序输出:在先满足定约束条件下(如 3必需在1前面,7必需在4前面),在满足:1尽量前,其次考虑2,依次.....(即有次约束). 开始的时候,只用拓扑,然后每次在都可以选的时候,优先考虑小的, ...
- jsp 时间格式
<%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %> <fmt:formatDate ...