微信小程序模板(template)使用详解


Posted in Javascript onJanuary 31, 2018

本文为大家分享了微信小程序模板template的使用方法,供大家参考,具体内容如下

效果图

以MUI的实例首页和列表页面为实例

微信小程序模板(template)使用详解

微信小程序模板(template)使用详解

通过上图,可以看出两个页面的列表部分很相近,以每行作为单元制作模板。

template模板

1、模板存放的位置以及使用模板页面存放的位置

微信小程序模板(template)使用详解

template模板的WXML

<!--右侧无箭头 -->
<template name="listNone">
 <view class="tui-menu-list">
 <navigator url="{{item.url}}">
  <block>
  <text>{{item.title}}</text>
  </block>
 </navigator>
 </view>
</template>
<!--右侧有箭头 -->
<template name="list">
 <view class="tui-menu-list tui-youjiantou">
 <navigator url="{{item.url}}">
  <block>
  <text>{{item.title}}</text>
  </block>
 </navigator>
 </view>
</template>

注意:上边在同一个WXML文件内创建了两个模板,一个右侧有箭头,一个右侧无箭头,以name名识别。
template模板的WXSS

.tui-menu-list{
 line-height: 80rpx;
 color: #555;
 font-size: 35rpx;
 padding: 0 0rpx 0 10px;
 position: relative;
}

在index页面使用template模板

WXML

<import src="../../template/list.wxml"/>

<view class="tui-fixed">
 <scroll-view style="height:100%;" scroll-y="true">
 <template wx:for="{{menu}}" is="list" data="{{item}}"></template>
 </scroll-view>
</view>
  • 用import 将模板引入;
  • 使用模板,template 的is 属性和模板中:name 属性对应,表示你要使用的具体模板,data 属性是模板中要使用的数据,注意数据结构要相同;
  • 可以直接循环模板,需要也可以在模板外加一层进行循环。

WXSS

此处将WXSS引入到全局!

@import "./template/list.wxss";
  • 直接使用import 引入列表的WXSS;
  • 此代码可以放在当前页面的WXSS(index.wxss)中,也可以放在全局wxss(app.wxss)中 ;
  • 建议:如果项目需要大量使用一个模板,WXSS引入到全局,减少代码量;如果项目只是很少地方使用模板,可以在需要的页面引入WXSS。

在list页面使用template模板

WXML

<import src="../../template/list.wxml"/>

<view class="tui-list-box">
 <view class="tui-list-head">右侧无箭头</view>
 <template wx:for="{{menu}}" is="listNone" data="{{item}}"></template>
</view>
<view class="tui-list-box">
 <view class="tui-list-head">右侧有箭头</view>
 <template wx:for="{{menu}}" is="list" data="{{item}}"></template>
</view>
<view class="tui-list-box-raduis">
 <view class="tui-list-head">圆角列表</view>
 <template wx:for="{{menu}}" is="list" data="{{item}}"></template>
</view>

总结

  • 在一个项目中需要在多处页面使用类似的模块,就需要创建模板—-减少代码量,同时代码高度复用;
  • 在同一个WXML文件中创建多个类似的模板用name属性来区别;
  • 模板WXSS在全局引入和在使用页面引入的区别在于模板的使用量;
  • 使用 import 引入模板 WXML 和 WXSS ;
  • 通过template 标签使用模板,template 标签的 is 属性与模板的 name 属性对应,data 属性代表传入模板的数据。

DEMO下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
创建公共调用 jQuery Ajax 带返回值
Aug 01 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
js使用心得分享
Jan 13 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 #Javascript
js保留两位小数方法总结
Jan 31 #Javascript
微信小程序icon组件使用详解
Jan 31 #Javascript
详解Chai.js断言库API中文文档
Jan 31 #Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 #Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 #Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 #Javascript
You might like
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
PHP实现简易图形计算器
2020/08/28 PHP
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
javascript下数值型比较难点说明
2010/06/07 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
Python中with及contextlib的用法详解
2017/06/08 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
某公司部分笔试题
2013/11/05 面试题
《小小竹排画中游》教学反思
2014/02/26 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
学校安全管理制度
2015/08/06 职场文书
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android