建议单独创建template目录，在template目录中创建管理模板文件。
由于模板只有wxml、wxss文件，而且小程序开发工具并不支持快速创建模板，因此就需要直接创建wxml、wxss文件了，一个template的模板文件和样式文件只需要命名相同即可。如果模板较多，建议在template目录下再创建子目录，存放单独的模板。
在上篇博客基础上演示，新建template文件夹，再在template文件夹下新建template.wxml和template.wxss。
1.template.wxml：（整行标红的为重要部分），文件中能写多个模板，用name区分。
<!-- pages/template/template.wxml --> <!-- 模板有name属性 --> <template name="noData"> <view> 暂时没有数据哦！ </view> </template> <!-- 模板有name属性 --> <template name="data"> <view class="list" wx:for=\'{{data}}\' wx:key=\'{{key}}\'> <view><text>{{item.a}}</text></view> <view><text>{{item.b}}</text></view> <view><text>{{item.c}}</text></view> </view> </template> <!-- 此时循环的data是info{data:[...]} -->
2.template.wxss：模板拥有自己的样式文件。
/* pages/template/template.wxss */ .list{ border-bottom: 1rpx solid #e6e6e6; padding: 10rpx 50rpx; }
3.index.wxml：（整行标红的为重要部分）template模板支持独立样式，需要在引用页面的样式文件中进行导入；页面应用template模板需要先导入模板；然后再嵌入模板。
<!-- pages/index/index.wxml --> <!-- 引入模板的wxml文件 --> <import src="../template/template.wxml" /> <!--导航菜单--> <view class="navbar"> <!--循环--> <view wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? \'active\' : \'\'}}" bindtap="navbarTap"> <view class="notice" wx:if="{{count[index]>0}}">{{count[index]}}</view> <text>{{item}}</text> </view> </view> <!--全部--> <view hidden="{{currentTab !== 0}}"> <template is="{{info0.data.length> 0 ? \'data\' : \'noData\'}}" data="{{...info0}}"></template> <!-- 此时进行判断该用哪个模板->判断template 的name属性,eg是指要传入模板的数据 --> </view> <!--支出--> <view hidden="{{currentTab !== 1}}"> <template is="{{info1.data.length> 0 ? \'data\' : \'noData\'}}" data="{{...info1}}"></template> <!-- 此时进行判断该用哪个模板->判断template 的name属性,eg是指要传入模板的数据 --> </view> <!--收入--> <view hidden="{{currentTab !== 2}}"> <template is="{{info2.data.length> 0 ? \'data\' : \'noData\'}}" data="{{...info2}}"></template> <!-- 此时进行判断该用哪个模板->判断template 的name属性,eg是指要传入模板的数据 --> </view> <!--其他--> <view hidden="{{currentTab !== 3}}"> <template is="{{info3.data.length> 0 ? \'data\' : \'noData\'}}" data="{{...info3}}"></template> <!-- 此时进行判断该用哪个模板->判断template 的name属性,eg是指要传入模板的数据 --> </view>
4.index.wxss：（整行标红的为重要部分）
/* pages/index/index.wxss */ /* 引入模板的wxss文件 */ @import"../template/template.wxss"; /*圆点数字标注*/ .notice { width: 25rpx; height: 25rpx; color: #fff; text-align: center; background-color: #1DB1CF; border-radius: 50%; position: absolute; float: left; top: 5rpx; font-size: 20rpx; right: 30rpx; line-height: 25rpx; } /*顶部导航样式*/ .navbar { flex: none; display: flex; background: #fff; } .navbar .item { position: relative; flex: auto; text-align: center; line-height: 80rpx; font-size: 30rpx; color: #666666; } .navbar .active { font-size: 40rpx; color: #1DB1CF; } .navbar .active:after { content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 4rpx; background: #1DB1CF; }
5.index.js：（整行标红的为重要部分）
// pages/index/index.js Page({ /** * 页面的初始数据 */ data: { navbar: [\'全部\', \'支出\', \'收入\', \'其他\'], count: [3, 2, 1, 0], //记录不同状态记录的数量 currentTab: 0, info0: { data: [{ a: \'超市消费\', b: \'-200元\', c: \'2020-04-04 12:30\', }, { a: \'转账给朋友\', b: \'-200元\', c: \'2020-04-05 12:30\', }, { a: \'朋友转账\', b: \'+200元\', c: \'2020-04-06 12:30\', }] //模板页用来展示的数据 }, info1: { data: [{ a: \'超市消费\', b: \'-200元\', c: \'2020-04-04 12:30\', }, { a: \'转账给朋友\', b: \'-200元\', c: \'2020-04-05 12:30\', }, ] //模板页用来展示的数据 }, info2: { data: [ { a: \'朋友转账\', b: \'+200元\', c: \'2020-04-06 12:30\', } ] //模板页用来展示的数据 }, info3: { data: [] //模板页用来展示的数据 }, }, //响应点击导航栏 navbarTap: function (e) { var that = this; that.setData({ currentTab: e.currentTarget.dataset.idx }) }, })
请发表评论