快捷導(dǎo)航

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

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

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

話不多說，上截圖

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,
 })
},

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

原生js實(shí)現(xiàn)對(duì)Ajax的封裝(仿jquery)
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)對(duì)Ajax的封裝，模仿jquery，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
JavaScript Canvas實(shí)現(xiàn)井字棋游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript Canvas實(shí)現(xiàn)井字棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
javascript合并表格單元格實(shí)例代碼
這篇文章主要介紹了javascript合并表格單元格實(shí)例代碼,在某些應(yīng)用中需要?jiǎng)討B(tài)的合并單元格，感興趣的朋友可以參考一下
2016-01-01
javascript創(chuàng)建對(duì)象的3種方法
這篇文章主要介紹了javascript創(chuàng)建對(duì)象的3種方法,對(duì)比分析js創(chuàng)建對(duì)象三種方式的優(yōu)缺點(diǎn)，感興趣的小伙伴們可以參考一下
2016-11-11
微信小程序?qū)崿F(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
TypeScript學(xué)習(xí)筆記之類型縮小
在TypeScript中若一個(gè)變量使用了聯(lián)合類型,那么當(dāng)我們使用該變量時(shí)必不可少的會(huì)去明確的限制該變量的具體類型，這稱為類型縮小,這篇文章主要給大家介紹了關(guān)于TypeScript學(xué)習(xí)筆記之類型縮小的相關(guān)資料,需要的朋友可以參考下
2022-09-09
改進(jìn) JavaScript 和 Rust 的互操作性并深入認(rèn)識(shí) wasm-bindgen 組件
這篇文章主要介紹了改進(jìn) JavaScript 和 Rust 的互操作性并深入認(rèn)識(shí) wasm-bindgen 組件,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
詳解ES6 Fetch API HTTP請(qǐng)求實(shí)用指南
本次將介紹如何使用Fetch API（ES6 +）對(duì)REST API的 HTTP請(qǐng)求，還有一些示例提供給大家便于大家理解。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
js 字?jǐn)?shù)統(tǒng)計(jì)，區(qū)分英漢
hta實(shí)現(xiàn)的字?jǐn)?shù)統(tǒng)計(jì)效果代碼，中文算兩個(gè)，英文算一個(gè)
2008-02-02
layer彈窗插件操作方法詳解
這篇文章主要介紹了layer彈窗插件操作方法,結(jié)合實(shí)例形式詳細(xì)分析了layer彈窗插件的下載、調(diào)用、設(shè)置等具體步驟與操作技巧,需要的朋友可以參考下
2017-05-05