vue仿携程轮播图效果(滑动轮播,下方高度自适应)


Posted in Vue.js onFebruary 11, 2021

先看案例,使用vue+swiper实现,slide不同高度时,动态计算盒子高度,让其下方高度自适应的效果

vue仿携程轮播图效果(滑动轮播,下方高度自适应)

首先搭建vue项目,这里不做过多说明,然后安装swiper

npm install swiper --save-dev

1. js部分:初始化swiper组件,vue要在mounted生命周期中进行初始化,代码如下:

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

vue仿携程轮播图效果(滑动轮播,下方高度自适应)

初始化时调用resize函数,计算屏幕容器的宽高,代码如下

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

计算完后调用draw函数,根据滑动slide,动态计算轮播容器的高度;注意这里引用了TweenMax框架,使用前需要安装,详细使用方法可参考官网TweenMax

npm install gsap -D

先大概看下TweenMax使用方法

vue仿携程轮播图效果(滑动轮播,下方高度自适应)

// 动态计算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++){
							//图片宽度满屏时,每个图片的高度
							this.swiperSlide[i].fullHeight = this.clientWidth/this.swiperSlide[i].getBoundingClientRect().width * this.swiperSlide[i].getBoundingClientRect().height;
						}
						//移动比例 移动过程中高度变化 0~1~0的变化规律
						let percent = Number((-translate / this.clientWidth).toFixed(5)) - iLeft
						//根据左右图片和移动比例得出相应高度
						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">
			<!--这里一定要加高度,不然会出问题!!!-->
				<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>
					<!--这里一定要加高度,不然会出问题!!!-->
				<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一定要加高度,不然会出问题

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;
	}

这样就实现了一个高度自适应的轮播效果了,三个及以上也没问题啦,喜欢点个关注吧,嘻嘻~

vue仿携程轮播图效果(滑动轮播,下方高度自适应)

到此这篇关于vue仿携程轮播图效果(滑动轮播,下方高度自适应)的文章就介绍到这了,更多相关vue轮播图内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
vue递归实现树形组件
Jul 15 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 #Vue.js
详解Vue的七种传值方式
Feb 08 #Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 #Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 #Vue.js
vue如何使用rem适配
Feb 06 #Vue.js
如何管理Vue中的缓存页面
Feb 06 #Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 #Vue.js
You might like
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
php 地区分类排序算法
2013/07/01 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
PHP简单遍历对象示例
2016/09/28 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
JavaScript实用技巧(一)
2010/08/16 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
使用python实现strcmp函数功能示例
2014/03/25 Python
python socket 超时设置 errno 10054
2014/07/01 Python
python采集博客中上传的QQ截图文件
2014/07/18 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
python内存动态分配过程详解
2019/07/15 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
用python实现学生管理系统
2020/07/24 Python
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
文案策划岗位职责
2015/02/11 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
中学图书馆工作总结
2015/08/11 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书