一、template的好处:可复用性高
- template目录结构
pages--->templates--->swiper-template、tabs-template... - 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,然后传入相应的参数即可。