12-template的使用

一、template的好处：可复用性高

1. template目录结构
   pages--->templates--->swiper-template、tabs-template...
2. template的使用

首先定义模板：swiper-template.wxml（相当于vue中的子组件）

<template name="swiper">
  <swiper>
    <swiper-item wx:for="{{swiperList}}" wx:key="index">
      <text>{{item.text}}</text>
    </swiper-item>
  </swiper>
</template>

其次在即将使用模板的.wxml中（相当于父级）引入模板

//<import src="../templates/swiper-template/swiper-template.wxml"/>
<import src="/pages/templates/swiper-template/swiper-template.wxml"/>

<template is="swiper"></template>//is对应模板中定义的name即可

但此时并不能正确显示，因为模板中用到的循环数据swiperList定义中在父级页面中，需要把传值到swiper-template.wxml中

<template is="swiper" data="{{swiperList,circular}}"></template>
//circular是swiper的一个属性，定义滑块循环滑动

️在data中可以传多个值，用逗号隔开即可
当然也可以把css放入到swiper-template.wxss，然后在父级页面的.wxss中引入

@import "/pages/templates/swiper-template/swiper-template.wxss";

同理：其他页面如果想用也可以上述一样的步骤引入swiper-template，然后传入相应的参数即可。