小程序模板的使用

文件目录如下:要在index中引用swiper中的轮播图模板

                      

代码如下：

index.wxml:

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

index.css:

/**index.wxss**/
@import '../../swiper/swiper.wxss';

index.js:

//index.js
//获取应用实例

const app = getApp()

Page({
  data: {
    item: {
      imgUrls: [
        'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
      ],
      indicatorDots: false,
      autoplay: true,
      interval: 4000,
      duration: 800,
      swiperCurrent: 0,
    }
  },

  onLoad: function () {

  },


})

swiper.wxml:

<template name="areaData">
  <!-- 轮播图  -->
  <view class='content-view'>
    <view class='swiper-box'>
      <swiper class='swiper' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange">
        <block wx:for="{{imgUrls}}" wx:key='key'>
          <swiper-item>
            <image src="{{item}}" class="slide-image" />
          </swiper-item>
        </block>
      </swiper>
      <view class="dots">
        <block wx:for="{{imgUrls}}" wx:key="unique">
          <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
        </block>
      </view>
    </view>
  </view>

</template>

swiper.css:

swiper {
  width: 100%;
}

.swiper-box {
  position: relative;
  width: 95%;
  margin: 0 auto;
  height: 300rpx;
  padding-top: 20rpx;
}

.swiper {
  width: 100%;
  height: 300rpx;
}

.dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20rpx;
  display: flex;
  justify-content: center;
}

.dots .dot {
  margin: 0 8rpx;
  width: 14rpx;
  height: 14rpx;
  background: #eee;
  border-radius: 8rpx;
  transition: all 0.6s;
}

.dots .dot.active {
  width: 24rpx;
  background: orchid ;
}

swiper image {
  width: 100%;
  height: 100%;
}