vue 自定义滚动条同步拖动（移动端）

实现效果，拖动左右箭头实现图片区域同步滚动，到边缘停止拖动。

HTML代码

<template>
  <div @touchstart="onClick">
	<!--使用draggable组件 图片列表区域-->
    <draggable
      v-model="select_list"
      @end="onEnd"
      class="display_flex_ac list_all"
      id="imageAssignment"
    >
    </draggable>
	
	<!--自定义拖动条-->
	<div
	  ref="container"
	  class="scroll_bar"
	  @touchend="endDrag"
	  @touchcancel="endDrag"
	  @touchstart="startDrag"
	  @touchmove.prevent="drag"
	>
	  <div
	    ref="draggable"
	    class="display_flex_ac_jc slide"
	    :style="{ transform: `translateX(${left}px)` }"
	  >
	    <a-icon type="double-left" /><a-icon type="double-right" />
	  </div>
	</div>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

JS代码

<script>
export default {
  data() {
	return {
	  dragging: false,
      left: 0,
      startX: 0,
      currentX: 0,
      scrollWidth: 0,
      rollingValue: 0,
      containerWidth: 0,
      draggableWidth: 0,
	}
  },
  methods: {
  	// 点击
    onClick(){
      this.containerWidth = this.$refs.container?.offsetWidth;
      this.draggableWidth = this.$refs.draggable?.offsetWidth;
      this.scrollWidth = document.getElementById("imageAssignment")?.scrollWidth;
    },
    // 拖动开始
    startDrag(e) {
      this.dragging = true;
      this.startX = e.touches[0].clientX - this.left;
    },
    // 拖动中
    drag(e) {
      if (this.dragging) {
        const minLeft = 0;
        const newX = e.touches[0].clientX - this.startX;
        const maxLeft = this.containerWidth - this.draggableWidth; // 去掉拖动元素宽度
        this.left = Math.max(minLeft, Math.min(maxLeft, newX)); // 当前拖动值

        const maxRight = this.scrollWidth - this.containerWidth; // 去掉当前屏幕
        this.rollingValue = this.onRolling(maxRight, maxLeft, this.left); // 计算滚动值
        document.getElementById("imageAssignment").scrollLeft = this.rollingValue;
      }
    },
    // 拖动结束
    endDrag() {
      this.dragging = false;
    },
    // 计算滚动条拖动值
    onRolling(maxRight, maxLeft, value) {

      // 计算比例关系
      const ratio = value / maxLeft;

      // 计算最终的值
      const finalValue = maxRight * ratio;

      // 返回最终值
      return finalValue;
    },
    // 拖动结束
    async onEnd(e) {
      // 同步滚动条位置
      let left = e.target.scrollLeft;
      const maxLeft = this.containerWidth - this.draggableWidth; // 去掉拖动元素宽度
      const maxRight = this.scrollWidth - this.containerWidth; // 去掉当前屏幕
      this.left = this.onRolling(maxLeft, maxRight, left); // 计算滚动条

      // 替换变化数据
      this.setImage_list(this.select_list);
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

CSS代码

.scroll_bar{
  width: 100%;
  overflow: auto;
  .slide{
    z-index: 1;
    height: 16px;
    bottom: -7px;
    opacity: 0.8;
    padding: 0 5px;
    position: absolute;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0px 3px #999;
    .anticon{
      font-size: 12px;
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18