這篇文章主要介紹了微信小程序如何實現一個swiper，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創新互聯公司專注于中大型企業的網站制作、成都網站建設和網站改版、網站營銷服務，追求商業策劃與數據分析、創意藝術與技術開發的融合，累計客戶上千余家，服務滿意度達97%。幫助廣大客戶順利對接上互聯網浪潮，準確優選出符合自己需要的互聯網運用，我們將一直專注品牌網站制作和互聯網程序開發，在前進的路上，與客戶一起成長！

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”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯，關注創新互聯行業資訊頻道，更多相關知識等著你來學習!

當前題目：微信小程序如何實現一個swiper-創新互聯
鏈接地址：http://vcdvsql.cn/article24/djhgje.html

成都網站建設公司_創新互聯，為您提供網站排名、企業網站制作、ChatGPT、靜態網站、品牌網站制作、移動網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯