原生小程序的 图片轮播 中间图放大效果 带分页器
效果是这样子的：
上代码：
1、html代码
<!--package1/pages/invite/invite.wxml-->
<view class="invite">
<swiper
class='swiper-block mySwiper'
autoplay='true'
circular='true'
previous-margin='125rpx'
next-margin='90rpx'
current='0'
bindchange='swiperChange'
>
<block wx:key='img' wx:for='{{swiperImgUrls}}'>
<swiper-item class='swiper-item'>
<image mode='aspectFill' src='{{item}}' class='slide-image {{swiperIndex == index ? "active" : ""}}' />
</swiper-item>
</block>
</swiper>
<!-- 分页器 -->
<view class="swiperPages">
<view wx:for="{{ pageList }}" wx:key="index" class="{{ item.pagetype == swiperIndex ? 'viewActive' : '' }}"></view>
</view>
</view>
2、css代码
page {
background-color: #f5f5f5;
height: 100%;
}
.invite {
100%;
height: 100%;
padding-top: 50rpx;
box-sizing: border-box;
}
/* 轮播图 */
.swiper-block {
height: 935rpx;
100%;
}
.swiper-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
overflow: unset;
box-sizing: border-box;
}
.slide-image {
height: 800rpx;
460rpx;
border-radius: 9rpx;
margin: 0rpx 20rpx;
z-index: 1;
opacity: 0.5;
}
.active {
transform: scale(1.14);
transition: all 0.2s ease-in 0s;
z-index: 20;
opacity: 1;
}
/* swiperPages 分页器 */
.swiperPages {
100%;
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
}
.swiperPages view{
10rpx;
height: 10rpx;
margin: 0 5rpx;
border-radius: 100%;
background-color: #ccc;
}
.swiperPages .viewActive{
background-color: #f70d06;
}
3、js代码
data: {
swiperImgUrls: [
'../../images/images/inviteSwiper1_03.png',
'../../images/images/inviteSwiper1_03.png',
'../../images/images/inviteSwiper1_03.png'
],
swiperIndex: 0,
// 分页器
pageList: [
{pagetype:0},
{pagetype:1},
{pagetype:2}
]
},
/**
* 轮播滑动时，获取当前的轮播id
*/
swiperChange(e) {
console.log(e)
const that = this;
that.setData({
swiperIndex: e.detail.current
},() => {
console.log(this.data.swiperIndex)
})
},
代码是没问题，图片记得自己换路径。
对面的小伙伴你辛苦了，加油！