酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
阿里云爆款特惠,精选爆款产品低至0.55折
酷站

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

来源:转载 作者:秩名 人气: 发布时间:2021-02-12
本篇文章主要介绍了详解vue仿携程轮播图效果(滑动轮播,下方高度自适应),对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

先看案例,使用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< 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;
    }
 

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

在这里插入图片描述

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://blog.csdn.net/zxo_apple/article/details/113755737

相关文章

  • js实现验证码干扰(静态)

    js实现验证码干扰(静态)

    效果 代码 !DOCTYPE htmlhtml head meta charset=UTF-8 title/title style *{ padding: 0; margin: 0; } canvas{ background: #272822; } /style /head body canvas id=canvas width=800 height=500/canvas script //获得画板 var canvas......
    02-23
  • 详解vue仿携程轮播图效果(滑动轮播,下方高度自适应)

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

    先看案例,使用vue+swiper实现,slide不同高度时,动态计算盒子高度,让其下方高度自适应的效果 首先搭建vue项目,这里不做过多说明,然后安装swiper npm install swiper --save-dev 1. js部分:初始化swiper组件,vue要在mounted生命周......
    02-12
  • uniapp微信小程序:key失效的解决方法介绍

    uniapp微信小程序:key失效的解决方法介绍

    uniapp 代码 template view image v-for=(item, i) in fileList :key=item[urlKey] :src=item[urlKey]/image /view/templatescript export default { props: { urlKey: {default: url}, fileList: Array } }/script 编译到 微信小程序 vi......
    01-21
  • 原生js实现自定义滚动条的实例教程

    原生js实现自定义滚动条的实例教程

    1.HTML文件 div1是滚动条,div2是滚动小球,div3是文本区域容器,div4是文本区域。 div id=div div id=div1 div id=div2 /div /div div id=div3 div id=div4 pCSS3 教程/p pCSS3 教程/p pCSS3 简介/p pCSS3 边框/p pCSS3 圆角/p pCSS3 背......
    01-21
  • Vue开发人员的7个最好的VSCode扩展的介绍

    Vue开发人员的7个最好的VSCode扩展的介绍

    在Visual Studio中添加正确的VS Code扩展可以让你作为开发者的生活变得更加轻松。 它们可以帮助格式化、可伸缩性、强制执行最佳实践,从而自动化开发过程中许多容易忘记的任务。它们也可以只是有趣的扩展,使我们的代码看起来更漂亮/更容......
    01-20
  • vue element el-transfer增加拖拽功能的实现

    vue element el-transfer增加拖拽功能的实现

    芯资管项目要求el-transfer增加拖拽排序,左右上下互相拖拽功能;原来的组件不支持拖拽,这里要用个第三方脱宅组件sortablejs 首先安装 1 sudo npm i sortablejs --save-dev html代码 1 2 3 4 5 template el-transfer ref = transfer id ......
    01-15
  • 微信小程序实现多图上传的方法

    微信小程序实现多图上传的方法

    看一下效果图 index.html view class=imgs block wx:for={{ imgs }} wx:key={{ index }} view class=img-box image src={{ item }} / icon class=iconfont size=18px color=gray data-index={{ index }} bind:tap=close type=cancel/icon......
    06-20
  • Javascript执行流程细节的介绍

    Javascript执行流程细节的介绍

    Javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈、全局对象、执行环境、变量对象、活动对象、作用域和作用域链等,这些概念正是JS引擎工作的核心组件......
    05-15
  • javascript代码是如何被压缩

    javascript代码是如何被压缩

    随着前端的发展,特别是 React , Vue 等构造单页应用的兴起,前端的能力得以很大提升,随之而来的是项目的复杂度越来越大。 此时的前端的静态资源也越来越庞大,而毫无疑问 javascript 资源已是前端的主体资源,对于压缩它的体积至为重......
    05-06
  • 解决React在安装antd之后出现的Can't resolve './locale'问题

    解决React在安装antd之后出现的Can't resolve './locale'问题

    React在安装antd之后出现的Cant resolve ./locale问题,是因为moment在2.2之后的版本都有问题,而react默认使用了最新的moment,但是在moment@2.18.1中是没有问题的。 解决方案就是配置webpack的alias,将所有的 moment 路径引用导入到 mo......
    05-03

最新更新