微信小程序實現一個簡單swiper代碼實例

更新時間：2019年12月30日 11:55:05 作者：暮雪上的晨星

這篇文章主要介紹了微信小程序實現一個簡單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,
 })
},

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

利用JavaScript如何查詢某個值是否數組內
這篇文章主要給大家介紹了關于利用JavaScript如何查詢某個值是否數組內的相關資料，文中通過示例代碼分別介紹了實現該問題的一些解決方法是否可行，需要的朋友可以參考借鑒，下面跟著小編來一起學習學習吧。
2017-07-07
HTML+CSS+JavaScript實現簡單日歷效果
這篇文章主要為大家詳細介紹了HTML+CSS+JavaScript實現簡單日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
js onclick事件傳參講解
本文是對js中的onclick事件傳參進行了詳細的講解，需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
javascript模擬的Ping效果代碼（Web Ping）
JS雖然發(fā)送不了真正Ping的ICMP數據包,但Ping的本質仍然是請求/回復的時間差,HTTP自然可以實現此功能.
2011-03-03
javascript滾輪控制模擬滾動條
這篇文章主要為大家詳細介紹了javascript滾輪控制模擬滾動條的相關資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
mock.js模擬前后臺交互
這篇文章主要為大家詳細介紹了mock.js模擬前后臺交互的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07
B/S(Web)實時通訊解決方案分享
這篇文章主要為大家分享了B/S(Web)實時通訊的解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
理解Javascript文件動態(tài)加載
這篇文章主要幫助大家理解Javascript文件動態(tài)加載，解決了Javascript文件動態(tài)加載時出現的錯誤，感興趣的小伙伴們可以參考一下
2016-01-01
JavaScript實現異步圖像上傳功能
這篇文章主要介紹了JavaScript實現異步圖像上傳功能,本文展示了一種使用代碼示例立即顯示圖像的方法(使用圖像的Base64編碼版本)，同時將其上載到服務器，而無需等待操作完成。需要的朋友可以參考下
2018-07-07
28個JavaScript常用字符串方法以及使用技巧總結
這篇文章主要給大家介紹了28個JavaScript常用字符串方法以及使用技巧的相關資料,文中統計的方法都非常實用,無論是日常工作還是面試,都建議多看一看,需要的朋友可以參考下
2021-09-09