微信小程序组件swiper结合模板的使用

微信小程序的swiper组件

今天学习了微信小程序的swiper组件。参考官网template和swiper

一、新建模板

在组件文件夹components下新建一个模板文件swiper.wxml。
template 使用name属性，作为模板的名字（模板的唯一标识符，使用时用is属性声明）。然后在<template/>内定义swiper代码片段 ，代码如下：

<!--template swiper.wxml-->
<template name="swiperCon">
<swiper indicator-dots="{{swiperCon.indicatorDots}}" indicator-color="{{swiperCon.indicatorColor}}" indicator-active-color="{{swiperCon.indicatorActiveColor}}"
        autoplay="{{swiperCon.autoplay}}" interval="{{swiperCon.interval}}" duration="{{swiperCon.duration}}" >
    <block wx:for="{{swiperCon.imgUrls}}" wx:key="*this">
        <swiper-item>
            <image src="{{item}}" class="slide-image"  />
        </swiper-item>
    </block>
</swiper>
</template>

二、使用模板

在调用页面使用模板。使用 is 属性，声明需要使用的模板（模板是单独的wxml文件，需要import引入）
然后将模板所需要的 data 传入

<!--index.wxml-->
<import src="../components/swiper.wxml"/>
<template is="swiperCon" data="{{swiperCon}}"/>

三、设置data

在js中设置swiper参数

/*index.js*/
Page({
  data: {
      swiperCon: {
          imgUrls: [
              '../../images/banner-1.png',
              '../../images/banner-2.png'
          ],
          indicatorDots: true,//是否显示面板指示点
          indicatorColor: "rgba(0, 0, 0, .3)",//指示点颜色
          indicatorActiveColor: "#007aff",//当前选中的指示点颜色
          autoplay: true,//是否自动切换
          interval: 5000,//自动切换时间间隔
          duration: 1000,//滑动动画时长
          circular: true,//是否采用衔接滑动
           }
      }
})

完整案例