首页 > 其他分享 >顶部图片随着下拉放大

顶部图片随着下拉放大

时间:2023-12-21 16:33:41浏览次数:31  
标签:动画 clientMoveY 顶部 页面 用户 value 手指 放大 图片

最近写项目要用到类似于淘宝店破的我的页面,在顶部用户执行下拉操作时顶部背景图会放大并高度增加的效果,松开时回弹到原来的大小。先上效果:

效果主要利用一下几个事件:

@touchstart 当用户手指按下时

@touchmove 当用户手指移动过程中

@touchend 当用户手指抬起时

这几个事件会记录用户手指在屏幕和页面上的位置信息,还有一个uniapp的生命周期事件onPageScroll()监听页面滚动。

!!!这几个事件一定要绑定在最外层的标签上,监听整个页面!!!

JS代码逻辑

let clientMoveY = 0 //按下时的位置(上一次的位置)
const start = (e: TouchEvent) => {
  console.log('start-----')
  clientMoveY = e.changedTouches[0].clientY
}
const move = (e: TouchEvent) => {
  if (clientMoveY === 0) {
    clientMoveY = e.changedTouches[0].clientY
    return
  }
  // 本次手指移动的位置和上次移动的位置对比 <0 证明用户在下拉
  if (clientMoveY - e.changedTouches[0].clientY < 0) {
    // 拿到下拉的距离
    const distance = (clientMoveY - e.changedTouches[0].clientY) * 0.5
    //放大1.5倍大小
    if (imgWidth.value < 1.5) {
      sheight.value -= distance
      imgWidth.value -= distance / 300
    } else {
      //超过1.5倍就return 优化性能
      return
    }
  } else {
    return
  }
  // 上边的代码执行结束之后再把本次手指的位置赋值给data中,用来下一次对比
  clientMoveY = e.changedTouches[0].clientY
}

 结束拖拽时返回弹到原图大小

const end = (e: unknown) => {
  clientMoveY = 0
  // 当图片的高度大于400的时候手指抬起再调用函数
  if (sheight.value > 300) {
    // 执行动画
    isPlay.value = true
    //动画结束后把顶部图片的高度和放大比例该会原来的值
    setTimeout(() => {
      sheight.value = 300
      imgWidth.value = 1
      // 并把动画的class名取消掉
      isPlay.value = false
    }, 505)
  }
}

 HTML

<div class="good-detail op-fullscreen" @touchstart="start" @touchmove="move" @touchend="end">
    <div :class="{ banner: true, isPlay: isPlay }" :style="{ height: sheight + 'px' }">
      <img
        id="zoomingImage"
        :src="goods.imgUrl"
        :class="{ isPlay: isPlay }"
        :style="{ height: sheight + 'px', transform: `scale(${imgWidth})` }"
      />
    </div>
  </div>

 这里我们需要先定义一个动画,当用户手指抬起是执行这个动画:

.banner {
    width: 100%;
    overflow: hidden; //防止图片放大,宽度被撑开
    background-size: cover;
    position: relative;
    img {
      width: 100%;
      max-height: 500px;
      position: absolute;
      bottom: 0;
    }
  }
  // 一个动画
  .isPlay {
    animation: big 0.5s 1 alternate ease-in-out forwards;
  }
  @keyframes big {
    100% {
      transform: scale(1);
      height: 300px;
    }
  }

 

标签:动画,clientMoveY,顶部,页面,用户,value,手指,放大,图片
From: https://www.cnblogs.com/duzhaoquan/p/17919368.html

相关文章

  • WPF显示网络图片的几种方法
    1、利用数据流1Imageimg;2byte[]btyarray=GetImageFromResponse(imageUrl);34//字节数据转流5MemoryStreamms=newMemoryStream(btyarray);67//重点:设置Image控件的Source为流格式的图片数据8img.Source=BitmapFrame.Create(ms,BitmapCrea......
  • Leaflet 使用图片作为地图
    Leaflet使用图片作为地图关键代码:L.CRS.Simple.transformation=newL.Transformation(1,0,1,0);//坐标原点切换为左上角varmap=newL.Map('map',{crs:L.CRS.Simple,//设置地图坐标模式为简单模式center:[0,0],//地图中心zoom:-0.5,//缩......
  • # cesium 截取图片
    cesium截取图片没啥好说的,直接贴代码吧 toImg(){if(viewer){viewer.scene.render();letcanvas=viewer.scene.canvas;letimage=canvas.toDataURL("image/png").replace("image/png","image/octet-stream");......
  • vue上传图片到指定文件夹
    vue代码<template><divclass="app-container"> <divclass="wenben"><el-upload:disabled="dis==0?true:false"class="upload-demo":action="uploadUrl":on-......
  • vue3+vite动态引入图片(import.meta.glob)
    Vite官方提供的 import.meta.glob API。这个方法一般用于批量引入js或者ts文件,但实际上这个方法就是很多import语句的集合而已,import是可以引入图片的,所以import.meta.glob也同样可以引入图片资源,只不过需要加入配置项as:'url'就可以了。 通常来说,我们可以用ES提供的......
  • 图片转换成base64格式的优缺点
    前言什么是base64?Base64,顾名思义,就是包括小写字母a-z、大写字母A-Z、数字0-9、符号"+“、”/“一共64个字符的字符集,(另加一个“=”,实际是65个字符,至于为什么还会有一个“=”,这个后面再说)。任何符号都可以转换成这个字符集中的字符,这个转换过程就叫做base64编码。图片转换成base6......
  • Vue中动态(import 、require)显示img图片
    vue中,经常会遇到显示图片的问题,如果是一个普通组件的话,那么这样就可以了<imgsrc="../assets/images/avtor.jpg"width="100%">上文的弊端有两个:首先,是采用绝对路径引入。如果以后图片移动了位置,需要修改代码。其次,如果说图片是一个logo图片,同一页面内有多处用到。就需要引用......
  • Vue项目引入图片的两种场景和三种方式
    场景一:public目录下的图片public目录public目录下的图片引入方式:Bash<!--'/images/'+图片名称,这种属于绝对路径,/指向public目录--><imgsrc="/images/image.png"> 场景二:在src目录下的图片src目录 通过import引入图片Bash//第一步:import引入importerrG......
  • 使用JavaScript实现基于图片地址的图片下载功能
    前言在Web开发中,有时我们需要让用户能够通过点击按钮或链接来下载特定的图片。使用JavaScript,我们可以轻松地实现这一功能,让用户能够方便地下载网页上显示的图片。本文将介绍如何使用JavaScript根据图片地址下载图片,并提供详细的代码示例。为什么需要图片下载功能?在许多网站和We......
  • Typora图片保存到gitee
    Typora图片保存到gitee初始化Gitee仓库登录gitee,在【设置】-【安全设置:私人令牌】新增一个令牌提交之后把token复制下来,这个token只会出现这一次,丢了就再生成新的令牌创建一个新的仓库,必须是公开的,因为markdown需要外部访问才能显示出图片下载Typora官方链......