vue实现移动端底部拖拽滑动弹出 上拉弹出 下拉消失

先看下gif效果图

废话不多说直接上代码：

//template部分

<template>
  <div class="wrap">
    <div>
      545454
    </div>
    <div class="bottomPopup" id="bottomPopup">
      <div
        class="title"
        @touchmove="touchmove($event)"
        @touchstart="touchstart($event)"
        @touchend="touchend($event)"
      >
        相关信息
      </div>
      <div class="contentList">
        <p>1信息1</p>
        <p>1信息2</p>
        <p>1信息3</p>
        <p>1信息4</p>
        <p>1信息5</p>
      </div>
    </div>
  </div>
</template>

//js部分

<script>
import { resize } from "@/utils/dom";
export default {
  data() {
    return {
      source: {},
    };
  },
  created() {
    resize();
  },
  mounted() {},
  methods: {
    touchstart(e) {
      let element = e.targetTouches[0];
      this.source.client = {
        x: element.clientX,
        y: element.clientY,
      };
    },
    touchmove(e) {
      let element = e.targetTouches[0];
      let maxHeight = document.querySelector('.contentList').offsetHeight
      let offsetHeightCont =
        document.querySelector(".contentList").offsetHeight;
      console.log("sss:" + offsetHeightCont);
      let distance = this.source.client.y - element.clientY;
      if (distance > maxHeight) {
        document
          .getElementById("bottomPopup")
          .animate(
            { transform: `translateY(0)` },
            { duration: 1, easing: "linear", fill: "forwards" }
          );
      } else if (distance < 0 && distance > -maxHeight) {
        document
          .getElementById("bottomPopup")
          .animate(
            { transform: `translateY(${-distance}px)` },
            { duration: 1, easing: "linear", fill: "forwards" }
          );
      }else if (distance < -maxHeight) {
        document
          .getElementById("bottomPopup")
          .animate(
            { transform: `translateY(${maxHeight})` },
            { duration: 1, easing: "linear", fill: "forwards" }
          );
      } else {
        document
          .getElementById("bottomPopup")
          .animate(
            { transform: `translateY(${maxHeight - distance}px)` },
            { duration: 1, easing: "linear", fill: "forwards" }
          );
      }
    },
    touchend(e) {
      let element = e.changedTouches[0];
      let distance = this.source.client.y - element.clientY;
      if (distance > 0) {
        document
          .getElementById("bottomPopup")
          .animate(
            { transform: 'translateY(0px)' },
            { duration: 200, easing: "linear", fill: "forwards" }
          );
      } else {
        document
          .getElementById("bottomPopup")
          .animate(
            { transform: 'translateY(4rem)' },
            { duration: 300, easing: "linear", fill: "forwards" }
          );
      }
    },
  },
};
</script>


```javascript
//resize.js部分
const resize = ({
  designWidth = 750,
} = {}) => {
  const changeView = () => {
    let width =
      document.body.clientWidth || document.documentElement.clientWidth,
      height =
        document.body.clientHeight || document.documentElement.clientHeight;
    if (width > 750) width = 750;
    document
      .getElementsByTagName("html")[0]
      .style.setProperty("font-size", (100 * width) / designWidth + "px");
    if (!width) {
      setTimeout(changeView, 20);
    }
  };
  changeView();
}

//css部分

```javascript
.wrap {
    .bottomPopup {
        position: fixed;
        width: 100%;
        bottom: 0;
        transform: translateY(4rem);
        background: #f1f1f1;
        color: #000;
        font-size: 16px;
        .title {
            text-align: center;
            line-height: 40px;
            border-bottom: 1px solid #000;
            background-color: yellow;
            color: red;
        }

        .contentList {
            height: 4rem;
            overflow-y: auto;
            p {
                padding: 0.32rem 0.1rem;
            }
        }
    }
}