1. 首页
  2. 编程语言
  3. Javascript
  4. vue仿携程轮播图效果(滑动轮播,下方高度自适应)

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

上传者: 2021-08-23 05:09:44上传 PDF文件 373.87 KB 热度 13次

先看案例,使用vue+swiper实现,slide不同高度时,动态计算盒子高度,让其下方高度自适应的效果首先搭建vue项目,这里不做过多说明,然后安装swiper1. js部分:初始化swiper组件,vue要在mounted生命周期中进行初始化,代码如下:初始化时调用resize函数,计算屏幕容器的宽高,代码如下计算完后调用draw函数,根据滑动slide,动态计算轮播容器的高度;注意这里引用了TweenMax框架,使用前需要安装,详细使用方法可参考官网TweenMax先大概看下TweenMax使用方法2.html部分

下载地址
用户评论