vue鼠标点击和滑动锚点

效果

<ul class="list">
  <li
    class="item"
    v-for="item in letters"
    :key="item"
    :ref="item"
    @click="handleLetterClick"
    @touchstart.prevent="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
    {{ item }}
  </li>
</ul>
	// 点击锚点
	handleLetterClick(e) {
      this.$emit("change", e.target.innerText); // A B C D
    },
    // 滑动锚点
    handleTouchStart() {
      this.touchStatus = true;
    },
    handleTouchMove(e) {
      // 思路就是获取A到顶部的高度，滑到B的时候让B的高度减去A 的高度就知道那个字母
      if (this.touchStatus) {
        // 当上下可以拖动的时候
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          // 正在滑动的字母到顶部的距离减去头部的距离
          const touchY = e.touches[0].clientY - 79;
          // A字母到顶部的距离 浅蓝色下沿
          const startY = this.$refs["A"][0].offsetTop // 207
          // 移动中距离顶部的高度的减去第一个到顶部的高度 / 每个字母的高度
          const index = Math.floor((touchY - startY) / 20);
          if (index >= 0 && index < this.letters.length) {
            this.$emit("change", this.letters[index]); // A B C D
          }
        }, 8);
      }
    },
    handleTouchEnd() {
      this.touchStatus = false;
    },

	// 列表组件
	// 模板需要动态的绑定ref 为A B C D即可
	watch: {
	    letter() {
	      if (this.letter) {
	        const element = this.$refs[this.letter][0];
	        // 进行滚动
	        this.scroll.scrollToElement(element, 500);
	      }
	    },
	  },