<swiper autoplay circular next-margin="60rpx" previous-margin="60rpx" bindchange="changeIndex">
<swiper-item wx:for="{{imgUrls}}" wx:key="item" class="swiper_item">
<view class="swiper_view_main" style="{{'transform: scaleX(0.95) scaleY('+(index==currentIndex?0.9:0.75)+')'}}">
<image src="{{item}}" class="img_item" />
<view class="swiper_tip">这是一个tip</view>
</view>
</swiper-item>
</swiper>
Page({
data: {
currentIndex: 0,
imgUrls: [
'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
],
},
changeIndex: function(e) {
this.setData({
currentIndex: e.detail.current
})
}
})
swiper {
width: 100%;
height: 260rpx;
}
.swiper_view_main {
transition: all 1s;
}
.img_item {
border-radius: 20rpx;
height: 260rpx;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.swiper_tip {
color: #fff;
font-size: 35rpx;
position: absolute;
bottom: 20rpx;
left: 40rpx;
}
网友评论