小程序轮播图中间大两边小

 不说这么多,直接上代码

技术图片

 

 <swiper class="swiper-block" previous-margin="90rpx" next-margin="90rpx" autoplay="{{yearOutoplay}}" current="0" circular=‘true‘ bindchange="yearSwiperChange" > <block wx:for="{{yearimgUrls}}" wx:index="{{index}}" wx:key=‘‘> <swiper-item class="swiper-item"> <image mode="aspectFill" src="{{item.url}}" class="slide-image {{swiperCurrent == index ? ‘active‘ : ‘‘}}"/> </swiper-item> </block> </swiper>

  

swiperCurrent: 0, yearOutoplay:false, yearimgUrls: [ { url:‘../../images/banner.jpg‘, }, { url:‘../../images/banner.jpg‘, }, { url:‘../../images/banner.jpg‘, }, ],

 

yearSwiperChange(e) {
let current = e.detail.current;
let that = this;
that.setData({
swiperCurrent: current,
})
},

 

相关文章