我们在开发旅游专题前端时,经常会遇到需要实现飞猪或携程里面的卡片滑动背景同步切换效果。uni-app
通过 swiper
组件也可以实现类似效果
<view class="swiper-box"> <image class="swiper-bg" :src="cardList[selectedCardIndex]" mode="aspectFill"></image> <swiper class="swiper" :previous-margin="cardList.length === 1 ? '20%' : selectedCardIndex === 0 ? '10%' : selectedCardIndex === cardList.length -1 ? '30%' : '20%'" :next-margin="cardList.length === 1 ? '20%' : selectedCardIndex === cardList.length -1 ? '10%' : selectedCardIndex === 0 ? '30%' : '20%'" @change="swiperChange"> <swiper-item v-for="(swiperItem,swiperIndex) in cardList" :key="swiperIndex" style="position: relative;"> <image :src='swiperItem' :class="{'swiper-active':selectedCardIndex == swiperIndex}"></image> </swiper-item> </swiper> </view>
css样式:
page { background-color: #FAFAFA; } .swiper-box { .swiper-bg { 100%; position: absolute; height: 500rpx; &::after { // 背景图从上往下渐变效果,慢慢渐变到网页背景色 content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; background-image: linear-gradient(to bottom ,transparent, #FAFAFA); } } .swiper { padding-top: 64rpx; height: 728rpx; // 考虑到卡片对应图片大小以及手机分辨率不同,大家可以根据实际情况设置 image { 100%; height: 100%; transform: scale(0.78); // 通过缩放实现待选卡片缩小效果 transition: transform 0.3s ease-in-out 0s; border-radius: 26rpx; box-shadow: 0px 2rpx 12rpx rgba(0, 0, 0, 0.1); &.swiper-active { transform: scale(1); } } } }
js:
export default { data() { return { selectedCardIndex: 0, cardList: [ "/static/images/lervor/travel/1.jpg", "/static/images/lervor/travel/2.jpg" ] } }, methods: { swiperChange(e) { this.selectedCardIndex = e.detail.current } } }