自定义滚动条+页面回弹效果

原创

已于 2023-04-04 14:02:32 修改 · 880 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #servlet #dreamweaver

于 2023-04-04 13:56:24 首次发布

该文章详细介绍了如何在Vue.js应用中创建上拉和下拉回弹效果，包括自定义滚动条和处理触摸事件来改变滚动块的位置。通过监听触摸动作，计算滚动距离并应用CSS过渡效果，实现了图片和列表的弹性滚动。此外，还涉及到了滚动条的样式隐藏和动态顶部位置计算。

效果图如下：

思路：

1.给图片增加上拉回弹效果

2.给列表增加下拉回弹效果

==》以上实现回弹效果

3.自定义一个滚动条，写死滚动条的大小，以及滚动块的大小

4.在上拉回弹和下拉回弹的方法里面添加可以让滚动块滚动的top值

思路：滚动的距离/页面总的高度 = 要获得的top值/滚动条的高度

代码实现如下：

<template>
  <div class="box" ref="box">
    <!-- 滚动条 -->
    <div class="scrollBar"><i ref="bar" /></div>
    <div class="root bounce" ref="root">
      <!-- 图片 -->
      <div
        class="topbg"
        ref="topbg"
        @touchstart.stop="handlerTouchStart"
        @touchmove.stop="handlerTouchMove"
        @touchend.stop="handlerTouchEnd"
      >
        <img src="../src/assets/1.jpg" alt="" />
      </div>
      <!-- 列表 -->
      <div
        class="lists"
        ref="lists"
        @touchstart.stop="handlerTouchLis