本文为大家分享了微信小程序模板template的使用方法，供大家参考，具体内容如下
效果图
以MUI的实例首页和列表页面为实例
通过上图，可以看出两个页面的列表部分很相近，以每行作为单元制作模板。
template模板
1、模板存放的位置以及使用模板页面存放的位置
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>
WXSS
此处将WXSS引入到全局！
@import "./template/list.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>
总结
DEMO下载
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
