微信小程序开发笔记(七)--template模板

建议单独创建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
    })
  },

})

官方传送门