微信小程序如何实现一个swiper

这篇文章主要介绍了微信小程序如何实现一个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”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!