微信小程序模板(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 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
微信小程序wxs实现吸顶效果
Jan 08 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 mongodb操作类 带几个简单的例子
2016/08/25 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
Python中for循环和while循环的基本使用方法
2015/08/21 Python
Python Flask-web表单使用详解
2017/11/18 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
浅谈python出错时traceback的解读
2020/07/15 Python
墨西哥网上超市:Superama
2018/07/10 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
合作经营协议书范本
2014/04/17 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
淘宝活动总结范文
2014/06/26 职场文书
学习保证书
2015/01/17 职场文书
紫日观后感
2015/06/05 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书