this.setData({current:1,})效果图一利用css
效果图二利用css
效果图三利用css和js实现两边小中间大
如果有你想要的效果，那就继续往下看，没有那就出门右（别）拐（走）吧。一开始想着如果和swiper.js一样，那就好了，看了下文档就放弃了。网上找了一下还是没找到具体实现方法，就开始自己倒腾，就想到几个办法，看客们讲究着试试吧。
第一种效果普通的间隔轮播1:wxml
viewclass='test'swiperdisplay-multiple-items='1'//这里是设置显示一张blockwx:for="{{imgUrls}}"//遍历js中的图片swiper-item//box外层swiperviewclass='box'//重点处理boximagesrc='{{item}}'/imageviewclass='content'text测试/text/view/view/swiper-item/block/swiper/view2:wxss
.test{width:100%;height:100vh;box-sizing:border-box;}swiper{height:100%;}.content{font-size:16px;color:#333;padding:20rpx40rpx;}swiper-item{//此时的swiper-item是占据一个页面的text-align:center;//让其中的内容居中显示}swiper-itemimage{width:100%;}.box{//box设置宽高（更具设计稿自定义吧）width:80%;height:700rpx;display:inline-block;margin-top:40px;box-sizing:border-box;box-shadow:004px4px#f2f2f2;//给box添加阴影效果更显著}这种实现是利用css来间接达到轮播间距的效果:
swiper利用display-multiple-items='1’属性一次展示一张swiper-item添加内容居中内容设置宽高最后就可以得到一次一张且有间距的轮播图第二种效果带边界的间隔轮播依旧按照上面的css不用大改,改已改box的宽度即可，按照你想要的效果去设置大小。
.box{width:90%;}只需要在swiper组件上加两个属性，来达到预留空间给里面box。在加上circular属性衔接滑动（无缝连接）。
第三种效果两边小中间大动画轮播1:wxml
viewclass='test'swiperdisplay-multiple-items='1'circularprevious-margin='50px'next-margin='50px'bindchange='change'current='{{current}}'blockwx:for="{{imgUrls}}"wx:key='{{index}}'swiper-itemviewclass="box"data-index='{{index}}'animation="{{index==current?animationData:animationData2}}"imagesrc='{{item}}'/imageviewclass='content'text测试/texttext测试/text/view/view/swiper-item/block/swiper/view2:wxss
.test{width:100%;height:100vh;box-sizing:border-box;}swiper{height:100%;}.content{font-size:16px;color:#333;padding:20rpx40rpx;}swiper-item{text-align:center;}swiper-itemimage{width:100%;}.box{width:90%;height:600rpx;display:inline-block;margin-top:40px;box-sizing:border-box;box-shadow:004px4px#f2f2f2;position:relative;top:33%;transform:translateY(-45%);}3.js利用animate来过渡动画，当下标相同的额时候执行放大的动画
Page({/页面的初始数据/data:{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'],current:0,animationData:{},animationData2:{}},/生命周期函数--监听页面加载/onLoad:function(options){this.stretch(350)},change(e){this.setData({current:e.detail.current})this.stretch(350)this.shrink(300)},//收缩stretch(h){varanimation=wx.createAnimation({duration:1000,timingFunction:'ease',})this.animation=animationanimation.height(h).step()this.setData({animationData:animation.export(),})},//展开shrink(h){varanimation2=wx.createAnimation({duration:1000,timingFunction:'ease',})this.animation2=animation2animation2.height(h).step()this.setData({animationData2:animation2.export()})},})以上就是三种轮播实现的方式，如果有疑问的可以下面留言，或者你有更好的方法，可以留言，邮箱发送
