其實(shí)在app里面這種效果還是比較常見(jiàn)的饱狂，開(kāi)源庫(kù)也比較多廷没，但是作為資深伸手黨的我钥弯，居然沒(méi)有搜索到實(shí)現(xiàn)3D輪播圖的實(shí)例径荔，好吧，只能自己開(kāi)擼了脆霎，我的方式是基于原生的Swiper來(lái)實(shí)現(xiàn)的总处，配合previous-margin next-margin來(lái)實(shí)現(xiàn)左右兩邊的邊框縮進(jìn)效果，好了這只是第一步睛蛛，第二部就是實(shí)現(xiàn)縮放的動(dòng)畫(huà)了效果了鹦马，我自己總結(jié)了兩種方法胧谈，
第一種：通過(guò)css中控制選中和沒(méi)有選中的swiper做監(jiān)聽(tīng)，修改對(duì)應(yīng)的css的樣式荸频，這時(shí)候需要對(duì)swpier做onChange監(jiān)聽(tīng)菱肖，來(lái)改變選中的index角標(biāo)，這個(gè)變量要寫(xiě)在data層里面旭从，讓直行img的時(shí)候能動(dòng)態(tài)獲取到xIndex的值稳强，執(zhí)行不同的css樣式，這種方式通過(guò)設(shè)置img的高度來(lái)實(shí)現(xiàn)和悦，選中設(shè)置100%的高度退疫，沒(méi)有選中的設(shè)置高度為90%，代碼如下
<view class='bannerWrap'>
<image class='imgBannerBack' src='../../static/img/back_banner.png' mode='scaleToFill'></image>
<swiper class='bannerSwiper' previous-margin="54rpx" next-margin='54rpx' indicator-dots="true" indicator-color='#B5B5B5' indicator-active-color='#fff' interval='3000' duration='500' bindchange='onChange' circular='true'>
<block wx:for="{{banner}}">
<swiper-item>
<image class="{{index==xindex?'imageBanner':'imageBanner_small'}}" src="{{item}}" id='{{item.url}}' bindtap='imageClick'></image>
</swiper-item>
</block>
</swiper>
</view>
.imageBanner {
width: 100%;
height: 100%;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
}
.imageBanner_small {
width: 94%;
height: 90%;
margin-left: 20rpx;
margin-right: 20rpx;
position: absolute;
bottom: 0;
border-top-left-radius: 15rpx;
border-top-right-radius: 15rpx;
}
第二種方法：
原理基本相同鸽素，只不過(guò)改變圖片大小的時(shí)候利用的css的trasnform和trasnsition來(lái)實(shí)現(xiàn)界面動(dòng)畫(huà)的放大和縮小的過(guò)程的一個(gè)切換褒繁，具體代碼就是css的樣式做了一個(gè)切換
具體代碼如下
.imageBanner {
width: 100%;
height: 100%;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
}
.imageBanner_small {
height: 100%;
transform: scale(0.9);
transition: all 0.2s ease-in 0s;
border-top-left-radius: 15rpx;
border-top-right-radius: 15rpx;
bottom: -13rpx;
margin-left: -10rpx;
position: absolute;
}
