这篇文章主要介绍了微信小程序如何实现一个swiper,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
HTML
<swiper class="swiper-block" previous-margin="70rpx" next-margin="70rpx" current="0" autoplay="true" bindchange="swiperChange" circular="true">
<block wx:for="{{totalData.banners}}" wx:index="{{index}}" wx:key="bannerList">
<swiper-item class="swiper-item">
<image mode="aspectFill" src="{{item.cover}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}" /> <br> </swiper-item>
</block>
</swiper>
css
.swiper-block {
height: 320rpx;
width: 100%;
}
.swiper-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: unset;
text-align: center;
}
.slide-image {
height: 230rpx;
width: 526rpx;
border-radius: 10rpx;
box-shadow: 0px 3px 10px 0px rgba(51, 51, 51, 0.3);
margin: 0 rpx 30rpx;
z-index: 1;
}
.active {
transform: scale(1.21);
transition: all 0.2s ease-in 0s;
z-index: 20;
}
js
swiperChange(e) {
const that = this;
that.setData({
swiperIndex: e.detail.current,
})
},
感谢你能够认真阅读完这篇文章,希望小编分享的“微信小程序如何实现一个swiper”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。