[转]微信小程序-template模板使用
本文转自:http://blog.csdn.net/u013778905/article/details/59646241
如下图,我在做华企商学院小程序的时候,课程搜索结果页和课程列表页结构是完全一样的,这时就非常适合使用模板来完成页面搭建。实现一次定义,到处使用。
模板
一、定义模板
1、新建一个template文件夹用来管理项目中所有的模板; 2、新建一个courseList.wxml文件来定义模板; 3、使用name属性,作为模板的名字。然后在<template/>
内定义代码片段。
注意: a.可以看到一个.wxml
文件中可以定义多个模板,只需要通过name
来区分; b.模板中的数据都是展开之后的属性。
<template name="courseLeft">
<navigator url="../play/play?courseUuid={{courseUuid}}&isCompany={{isCompany}}">
<view class="item mr26">
<image src="{{imagePath}}" mode="aspectFill"></image>
<view class="course-title">
<text class="title">{{courseName}}</text>
<text class="author">- {{teacherName}}</text>
</view>
<view class="course-info clearfix">
<view class="fl"><text class="play">{{playCount}}</text></view>
<view class="fr"><text class="grade">{{score}}</text></view>
</view>
<view wx:if="{{studyProgress}}" class="tip-completed">{{studyProgress}}</view>
</view>
</navigator>
</template>
<template name="courseRight">
<navigator url="../play/play?courseUuid={{courseUuid}}&isCompany={{isCompany}}">
<view class="item">
<image src="{{imagePath}}" mode="aspectFill"></image>
<view class="course-title">
<text class="title">{{courseName}}</text>
<text class="author">- {{teacherName}}</text>
</view>
<view class="course-info clearfix">
<text class="play fl">{{playCount}}</text>
<text class="grade fr">{{score}}</text>
</view>
<view wx:if="{{studyProgress}}" class="tip-completed">{{studyProgress}}</view>
</view>
</navigator>
</template>
二、使用模板
1、使用 is 属性,声明需要的使用的模板
<import src="../../templates/courseList.wxml"/>
2、将模板所需要的 data 传入,一般我们都会使用列表渲染。
<block wx:for="{{courseList}}">
<template is="{{index%2 === 0 ? 'courseLeft' : 'courseRight'}}" data="{{...item}}"></template>
</block>
注意: a.可以通过表达式来确定使用哪个模板is="{{index%2 === 0 ? 'courseLeft' : 'courseRight'}}"
或者通过wx:if
来确定。index
是数组当前项的下标。
<template wx:if="{{index%2 === 0}}" is="courseLeft" data="{{...item}}"></template>
<template wx:else is="courseRight" data="{{...item}}"></template>
b. data
是要模板渲染的数据,data="{{...item}}"
写法是ES6的写法,item
是wx:for
当前项,...
是展开运算符,在模板中不需要再{{item.courseName}}
而是直接{{courseName}}
。
三、模板样式
1、在新建模板的时候同时新建一个courseList.wxss
的文件,与CSS同样的写法控制样式。 2、在需要使用模板的页面 .wxss
文件中import
进来;或者直接在app.wxss中引入,这样只需要一次引入,其他文件就不用引入了。
@import url("../template/courseList.wxss");
[转]微信小程序-template模板使用的更多相关文章
- 微信小程序 template模板使用
参考文章: 微信小程序-template模板使用
- 微信小程序template模板与component组件的区别和使用
前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...
- 转发:微信小程序-template模板使用
转载于CSDN--[向朔1992]处.(部分内容根据实际情况有所修改) 小程序实现主页面调用次级页面的wxml页面内容,如下图: 根据上图,我们可以将图片和图片信息作为一个goodsList.wx ...
- 微信小程序-template模板
============================= 构建template模板 ============================= 1.分析得出共为 ...
- 微信小程序发送模板消息
微信小程序发送模板消息 标签(空格分隔): php 看小程序文档 [模板消息文档总览]:https://developers.weixin.qq.com/miniprogram/dev/framewo ...
- 微信小程序开发--模板(template)使用,数据加载,点击交互
微信小程序视图层提供了 模板(template),可以在模板中定义代码片段,然后在不同的地方调用.结果在数据渲染那懵逼了.按照官网上对模板的说明和对数据的加载. 1.定义模板 使用name属性,作为模 ...
- 微信小程序开发——模板中加载html代码
最新方法可以使用微信小程序提供的 rich-text (富文本)组件直接写解析html,详见 rich-text: <rich-text class='f13 c_9' nodes=" ...
- 微信小程序 template添加点击事件
介绍template是微信小程序提供的模板,可以在模板中定义代码片段,然后在不同的地方调用. 简单使用定义template因为项目中可能会需要到不止一个template,所以最好新建一个文件夹来存放t ...
- 微信小程序——template详细使用
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用减少冗余代码. 1.1定义模板 1.1.1.创建模板文件夹 1.1.2.使用 name 属性,作为模板的名字.然后 ...
随机推荐
- EasyFastCMS系列教学课程——2、底层代码 ModelHelper与SQLHelper简介
从本节课开始,我们开始逐步正式进入实际的编码过程中.本节课的核心内容为SQLHeelper和ModelHelper两个核心类库的介绍. SQLHelper这个类相信大家都很熟悉了,他是微软petsho ...
- CryptoJS导入sha加密包出现错误
Uncaught TypeError: Cannot read property 'extend' of undefined at sha224.js:12 at sha224.js:60 Uncau ...
- Notepad++给自己打造一款PowerQuery M语言编辑器【转】
Excel 使用Notepad++给自己打造一款PowerQuery M语言编辑器 Excel 使用Notepad++给自己打造一款PowerQuery M语言编辑器-Power BI-ExcelHo ...
- OCP题库变了,2018年052新题库-29题
29.In one of your databases: * The database default tablespace is EXAMPLE. * Deferred_segment_creati ...
- [Winter Vacation] 语文实词虚词练习册答案
下载通道: [120个文言文实词小故事] [18个文言文虚词小故事] 120个文言文实词小故事 爱 楚人爱(宠爱)其子,虽爱(吝惜)钱财,于其子之求而无不应.其子成人,有陶氏之风独爱(喜爱)菊,众 ...
- linux性能评估与分析工具---CPU篇
一. uptime root@calm:~# uptime :: up days, :, user, load average: 0.04, 0.09, 0.04 这里主要关注load average ...
- JavaScript中setInterval的用法总结
setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数据库的变量或更新时间显示. setInterval动作的语法格式如下:setInterva ...
- 可变参数中size_t遇见的问题
在修改php扩展Trie时,出现了一个小bug PHP_FUNCTION(trie_filter_load) { Trie *trie; char *path; int path_len; if (z ...
- 初级算法49题 — LeetCode(20181122 - )
Array: Single Number class Solution { public int singleNumber(int[] nums) { if (nums == null || nums ...
- apk包不能生成的原因之debug.keystore
在Eclipse里面编译生成的APK中有一个签名的,它默认的key是debug.keystore,它默认的路径是: C:\Users\<用户名>\.android\debug.keysto ...