微信小程序?qū)崿F(xiàn)一個簡單swiper代碼實例

來源：本站原創(chuàng)|時間：2020-01-10|欄目：JavaScript|點擊：次

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)一個簡單swiper代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

話不多說，上截圖

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;
}

swiperChange(e) {
 const that = this;
 that.setData({
  swiperIndex: e.detail.current,
 })
},

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

上一篇：TypeScript之調(diào)用棧的實現(xiàn)

欄目：JavaScript

下一篇：Vue實現(xiàn)剪貼板復(fù)制功能

本文標(biāo)題：微信小程序?qū)崿F(xiàn)一個簡單swiper代碼實例

本文地址：http://mengdiqiu.com.cn/a1/JavaScript/9351.html

更多JavaScript

欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

JavaScript

微信小程序?qū)崿F(xiàn)一個簡單swiper代碼實例

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機閱讀