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中动态修改css其中一个属性值操作
Dec 07 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 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
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
利用php输出不同的心形图案
2016/04/22 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
php表单处理操作
2017/11/16 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
Js的MessageBox
2006/12/03 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
增大python字体的方法步骤
2020/07/05 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
员工离职感谢信
2015/01/22 职场文书
培训感想范文
2015/08/07 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
React实现动效弹窗组件
2021/06/21 Javascript
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL