效果实现思路
- 使用微信组件swiper
- swiper组件api previous-margin、next-margin
属性名 | 类型 | 默认值 | 类型说明 |
---|---|---|---|
previous-margin | String | “0px” | 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值 |
next-margin | String | “0px” | 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值 |
- 设置当前图片放大(设置css样式)
下面直接贴上代码
banner.wxml
<swiper autoplay interval="{{interval}}" circular previous-margin="{{leftMargin}}" next-margin="{{rightMargin}}" bindchange="handleChange">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image {{currentIndex == index ? 'active': ''}}"/>
</swiper-item>
</block>
</swiper>
banner.wxss
.slide-image {
position: absolute;
height: 225rpx;
width: 570rpx;
border-radius: 15rpx;
z-index: 5;
opacity: 0.7;
top: 13%;
margin: 0 20rpx;
}
swiper {
height: 430rpx;
}
.active {
opacity: 1;
z-index: 10;
height: 280rpx;
width: 570rpx;
top: 7%;
transition: all 0.2s ease-in 0s;
}
banner.js
Page({
data: {
imgUrls: [
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220114942&di=3bf52981626b3cc290dd684df29e714c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F8b82b9014a90f6038de2556a3212b31bb051ed4a.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220114942&di=3bf52981626b3cc290dd684df29e714c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F8b82b9014a90f6038de2556a3212b31bb051ed4a.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220114942&di=3bf52981626b3cc290dd684df29e714c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F8b82b9014a90f6038de2556a3212b31bb051ed4a.jpg'
],
interval: 5000,
duration: 1000,
circular: true,
leftMargin: '80rpx',
rightMargin: '80rpx',
currentIndex: 0
},
handleChange: function (e) {
this.setData({
currentIndex: e.detail.current
})
},
})