快捷導(dǎo)航

vue仿攜程輪播圖效果(滑動(dòng)輪播,下方高度自適應(yīng))

更新時(shí)間：2021年02月11日 10:00:42 作者：牛頓頓的apple

這篇文章主要介紹了vue仿攜程輪播圖效果（滑動(dòng)輪播,下方高度自適應(yīng)）,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

先看案例，使用vue+swiper實(shí)現(xiàn)，slide不同高度時(shí)，動(dòng)態(tài)計(jì)算盒子高度，讓其下方高度自適應(yīng)的效果

在這里插入圖片描述

首先搭建vue項(xiàng)目，這里不做過(guò)多說(shuō)明，然后安裝swiper

npm install swiper --save-dev

1. js部分：初始化swiper組件，vue要在mounted生命周期中進(jìn)行初始化，代碼如下：

import Swiper from 'swiper'
import { TweenMax, Power2 } from 'gsap'

在這里插入圖片描述

初始化時(shí)調(diào)用resize函數(shù)，計(jì)算屏幕容器的寬高，代碼如下

// 重新計(jì)算屏幕寬高
resize(swiper) {
	this.clientWidth = document.documentElement.clientWidth||document.body.clientWidth;
	this.clientHeight = document.documentElement.clientHeight||document.body.clientHeight;
	this.draw(swiper)
},

計(jì)算完后調(diào)用draw函數(shù)，根據(jù)滑動(dòng)slide，動(dòng)態(tài)計(jì)算輪播容器的高度；注意這里引用了TweenMax框架，使用前需要安裝，詳細(xì)使用方法可參考官網(wǎng)TweenMax

npm install gsap -D

先大概看下TweenMax使用方法

在這里插入圖片描述

// 動(dòng)態(tài)計(jì)算swiper-container高度
			draw(swiper) {
				TweenMax.to(this.tweenObj, 0.5, {translate: swiper.translate, ease: Power2.easeOut,
					onUpdate: () => {
						let translate = this.tweenObj.translate
						// 左邊slide索引
						let iLeft = Math.floor(-translate / this.clientWidth)
						if (iLeft > this.slidesLength) {
							iLeft = this.slidesLength
						}
						// 右邊slide索引
						let iRight = iLeft + 1
						if (iRight > this.slidesLength) {
							iRight = this.slidesLength
						}
						for(let i=0; i< this.swiperSlide.length; i++){
							//圖片寬度滿屏?xí)r，每個(gè)圖片的高度
							this.swiperSlide[i].fullHeight = this.clientWidth/this.swiperSlide[i].getBoundingClientRect().width * this.swiperSlide[i].getBoundingClientRect().height;
						}
						//移動(dòng)比例 移動(dòng)過(guò)程中高度變化 0~1~0的變化規(guī)律
						let percent = Number((-translate / this.clientWidth).toFixed(5)) - iLeft
						//根據(jù)左右圖片和移動(dòng)比例得出相應(yīng)高度
						let currentHeight = (this.swiperSlide[iRight].fullHeight - this.swiperSlide[iLeft].fullHeight )*percent + this.swiperSlide[iLeft].fullHeight
						// 輪播容器高度
						swiper.el.style.height = currentHeight +'px'
					}
				})
			}

2.html部分

<!--仿攜程輪播效果-->
	<div class="swiper-demo">
		<div class="swiper-container">
			<div class="swiper-wrapper">
			<!--這里一定要加高度，不然會(huì)出問(wèn)題?。?！-->
				<div class="swiper-slide" style="height: 222px;">
					<div class="wrap" v-for="(item, index) in category1" :key="index">
						<img src="../assets/wish.png" alt="">
						<span>{{item.name}}</span>
					</div>
				</div>
					<!--這里一定要加高度，不然會(huì)出問(wèn)題?。?！-->
				<div class="swiper-slide" style="height: 400px;">
					<div class="wrap" v-for="(item, index) in category2" :key="index">
						<img src="../assets/wish.png" alt="">
						<span>{{item.name}}</span>
					</div>
				</div>
			</div>
		</div>

		<div style="background: salmon; height: 80vh">隨便寫自己的UI</div>
	</div>

注意：swiper-slide一定要加高度，不然會(huì)出問(wèn)題

3.css部分

.swiper-slide {
		width: auto;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.wrap {
		width: 24%;
		height: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	img {
		width: 60px;
	}

這樣就實(shí)現(xiàn)了一個(gè)高度自適應(yīng)的輪播效果了，三個(gè)及以上也沒(méi)問(wèn)題啦，喜歡點(diǎn)個(gè)關(guān)注吧，嘻嘻~

在這里插入圖片描述