微信小程序模板(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 相关文章推荐
jquery 添加节点的几种方法介绍
Sep 04 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
angularJS开发注意事项
May 26 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
vue多次循环操作示例
Feb 08 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 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写的小东西
2006/12/06 PHP
获得Google PR值的PHP代码
2007/01/28 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
vue的mixins属性详解
2018/03/14 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
Python中unittest用法实例
2014/09/25 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
Python字典底层实现原理详解
2019/12/18 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
工艺工程师岗位职责
2014/03/04 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
教育见习报告范文
2014/11/03 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
解除合同协议书范本
2016/03/21 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技