微信小程序模板(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 学习笔记(一)
Oct 13 Javascript
JS setCapture 区域外事件捕捉
Mar 18 Javascript
关于document.cookie的使用javascript
Oct 29 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
JavaScript数值转换的三种方式总结
Jul 31 Javascript
详解javascript的变量与标识符
Jan 04 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
浅谈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中常用数组处理方法实例分析
2008/08/30 PHP
php str_pad 函数使用详解
2009/01/13 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
js loading加载效果实现代码
2009/11/24 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
python的绘图工具matplotlib使用实例
2014/07/03 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
Python关于反射的实例代码分享
2020/02/20 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
python dict如何定义
2020/09/02 Python
高考自主招生自荐信
2013/10/20 职场文书
后勤人员自我鉴定
2013/10/20 职场文书
五心教育心得体会
2014/09/04 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
2015团员个人年度总结
2015/11/24 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js