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

这篇文章主要介绍了vue仿携程轮播图效果（滑动轮播,下方高度自适应）,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

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

在这里插入图片描述

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

 npm install swiper --save-dev

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

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

在这里插入图片描述

初始化时调用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使用方法

在这里插入图片描述

 // 动态计算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

2.html部分

      {{item.name}}
  {{item.name}}
随便写自己的UI

注意：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仿携程轮播图效果(滑动轮播,下方高度自适应)的详细内容，更多请关注0133技术站其它相关文章！

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

相关文章

前端开发

置顶推荐

猜你喜欢