微信小程序swiper實現滑動放大縮小效果
更新時間：2018年11月15日 09:17:27 作者：qq_37902065
這篇文章主要介紹了微信小程序swiper實現滑動放大縮小效果,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
效果圖如下所示：
具體代碼如下所示：
<swiper class="swiper-block" previous-margin="90rpx" next-margin="90rpx" current="0" bindchange="swiperChange">
<block wx:for="{{imgUrls}}" wx:index="{{index}}">
<swiper-item class="swiper-item">
<image mode="aspectFill" src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}"/>
</swiper-item>
</block>
</swiper>
.swiper-block{
height: 480rpx;
width: 100%;
}
.swiper-item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
overflow:unset;
}
.slide-image{
height:320rpx;
width: 520rpx;
border-radius: 9rpx;
box-shadow: 0px 0px 30rpx rgba(0, 0,0,.2);
margin: 0rpx 30rpx;
z-index: 1;
}
.active{
transform: scale(1.14);
transition:all .2s ease-in 0s;
z-index: 20;
}.swiper-block{
height: 480rpx;
width: 100%;
}
.swiper-item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
overflow:unset;
}
.slide-image{
height:320rpx;
width: 520rpx;
border-radius: 9rpx;
box-shadow: 0px 0px 30rpx rgba(0, 0,0,.2);
margin: 0rpx 30rpx;
z-index: 1;
}
.active{
transform: scale(1.14);
transition:all .2s ease-in 0s;
z-index: 20;
}
Page({
data: {
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000
},
swiperChange(e) {
const that = this;
that.setData({
swiperIndex: e.detail.current,
})
}
})
總結
以上所述是小編給大家介紹的微信小程序swiper實現滑動放大縮小效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了JS實現身份證輸入框的輸入效果，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-08-08
這篇文章介紹了頂部緩沖下拉菜單導航特效的JS代碼，有需要的朋友可以參考一下2013-08-08
本文為大家介紹下js如何獲取location.href的參數，需要注意的是去掉參數里最開頭的?號，具體實現如下，有需要的朋友可以參考下，希望對大家有所幫助2013-08-08
javascript 三種方法實現獲得和設置以及移除元素屬性
獲得和設置以及移除元素屬性在操作dom的過程中會經常遇到吧,為了提高工作的效率本文整理了一些快捷操作方法和大家一起分享，感興趣的朋友可以參考下哈2013-03-03
javascript 極速 隱藏/顯示萬行表格列只需 60毫秒
隱藏表格列 這種方式的效率極低。例如，隱藏一個千行表格的某列，在我的筆記本（P4 M 1.4G，768M內存）上執(zhí)行需要約 4000毫秒的時間，令人無法忍受。2009-03-03
我們在用javascript創(chuàng)建一個遮蓋層(div)后，如果點擊關閉用到了2009-06-06
這篇文章主要介紹了chatGPT教我寫compose函數,文中給大家介紹了chatGPT過程概略，本文結合實例代碼圖文給大家講解的非常詳細，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了微信小程序一周時間表功能實現,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
有幾種方式，但都不完美 其一:不斷循環(huán)，直到達到指定時間、其二:用xhr同步請求后臺程序，比如傳2000過去，后臺就sleep 2秒后再返回，這種方式也有缺點，當N多客戶端都請求后臺時，一直保持連接http開銷很大,感興趣的朋友可以了解下啊2013-01-01
這篇文章主要介紹了js字符串倒序的實例代碼,代碼分為3部分，給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11