微信小程序?qū)崿F(xiàn)一個(gè)簡(jiǎn)單swiper代碼實(shí)例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)一個(gè)簡(jiǎn)單swiper代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
話不多說(shuō),上截圖
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í)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序?qū)崿F(xiàn)Swiper輪播圖效果
- 微信小程序?qū)崿F(xiàn)3D輪播圖效果(非swiper組件)
- 微信小程序利用swiper+css實(shí)現(xiàn)購(gòu)物車(chē)商品刪除功能
- 微信小程序?qū)崿F(xiàn)swiper切換卡內(nèi)嵌滾動(dòng)條不顯示的方法示例
- 微信小程序?qū)崿F(xiàn)的3d輪播圖效果示例【基于swiper組件】
- 微信小程序使用swiper組件實(shí)現(xiàn)類(lèi)3D輪播圖
- 微信小程序?qū)崿F(xiàn)tab和swiper切換結(jié)合效果
- 微信小程序?qū)崿F(xiàn)頂部選項(xiàng)卡(swiper)
- 微信小程序 swiper制作tab切換實(shí)現(xiàn)附源碼
相關(guān)文章
利用JavaScript如何查詢某個(gè)值是否數(shù)組內(nèi)
這篇文章主要給大家介紹了關(guān)于利用JavaScript如何查詢某個(gè)值是否數(shù)組內(nèi)的相關(guān)資料,文中通過(guò)示例代碼分別介紹了實(shí)現(xiàn)該問(wèn)題的一些解決方法是否可行,需要的朋友可以參考借鑒,下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07HTML+CSS+JavaScript實(shí)現(xiàn)簡(jiǎn)單日歷效果
這篇文章主要為大家詳細(xì)介紹了HTML+CSS+JavaScript實(shí)現(xiàn)簡(jiǎn)單日歷效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07javascript模擬的Ping效果代碼 (Web Ping)
JS雖然發(fā)送不了真正Ping的ICMP數(shù)據(jù)包,但Ping的本質(zhì)仍然是請(qǐng)求/回復(fù)的時(shí)間差,HTTP自然可以實(shí)現(xiàn)此功能.2011-03-03JavaScript實(shí)現(xiàn)異步圖像上傳功能
這篇文章主要介紹了JavaScript實(shí)現(xiàn)異步圖像上傳功能,本文展示了一種使用代碼示例立即顯示圖像的方法(使用圖像的Base64編碼版本),同時(shí)將其上載到服務(wù)器,而無(wú)需等待操作完成。需要的朋友可以參考下2018-07-0728個(gè)JavaScript常用字符串方法以及使用技巧總結(jié)
這篇文章主要給大家介紹了28個(gè)JavaScript常用字符串方法以及使用技巧的相關(guān)資料,文中統(tǒng)計(jì)的方法都非常實(shí)用,無(wú)論是日常工作還是面試,都建議多看一看,需要的朋友可以參考下2021-09-09