微信小程序开发笔记之swiper

swiper轮播图

小程序中的组件
配置参数：
微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
常用配置：
indicatorDots:“true”,//是否显示面板指示点，默认为false
autoplay:“true”,//是否自动切换，默认为false
interval:“3000”,//自动切换时间间隔
duration:“500”,//滑动动画时长
circular:“true”,//是否采用衔接滑动，默认为false
swiperCurrent:“0”,//当前所在滑块的 index
示例代码：

index.wxml

<view class="top">
<swiper  class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{duration}}" current="{{swiperCurrent}}" >
<block wx:for="{{imgUrls}}"wx:for-index="{{idx}}">
<swiper-item>
<image src="{{item}}" class="img"/>
</swiper-item>
</block>
</swiper>
</view>

index.wxss

/*轮播图样式*/
page{
height:100%;
}
.top{
width:100%;
height:35%;
}
.swiper{
width:100%;
height:100%;
}
.img{
width:100%;
height:100%;
}

index.js

Page({
/**
* 页面的初始数据
*/
data: {
indicatorDots:"true",
autoplay:"true",
interval:"3000",
duration:"500",
circular:"true",
swiperCurrent:"0",
imgUrls:[
"../../images/image1.jpg",
"../../images/image2.jpg",
"../../images/image3.jpg",
"../../images/image2.jpg"
]
}
}）