这次项目上有一个列线图的功能需要实现，暂时想到了两种方案。效果图如下：
方案一：根据选中滑块滑动距离，修改滑块的偏移量，实现滑块跟随滑动方向，进行移动，暂时只实现上下滑动，左右滑动的原理一样。
在小球上添加三个事件@touchstart、@touchmove、@touchend，
start：（1）获取滑块在当前位置相对于屏幕的垂直坐标：
this.startData = parseInt(el.changedTouches[0].screenY)
（2）获取父元素的位置，和滑块相对于父元素的距离
let parent = this.$refs.rpn.getBoundingClientRect();
let child = this.$refs.point.getBoundingClientRect();
let parentY = parent.y;
let childY = child.y;
this.thisPoint = childY - parentY;
move:(1)获取父元素的高度
let parentHeight = parent.height;
（2）获取子元素的高度
let childHeight = child.height;
（3）获取当前竖直方向的移动距离
this.moveData = parseInt(el.changedTouches[0].screenY);
（4）计算当前滑块距离项目父元素的位置
let number = this.moveData - this.startData + this.thisPoint;
（5）设置滑块的top值
this.$refs.point.style.top = `${number}px`
（6）需要注意不要让滑块超出父元素的高度，上下具体的偏移量，按照实际需求添加
end：如果滑动到两条线之间，需要向下或者向上取对应的值，根据需求取对应的数值，从新计算top值，添加给滑块。
方案二：使用input[type=range],修改input的默认样式：
input[type=range] {
-webkit-appearance: none;
color: rgba(0, 0, 0, 0);
height: 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 16px;
width: 16px;
border-radius: 50px;
background: url('./img/Oval@2x.png') no-repeat;
background-size: 100% 100%;
cursor: pointer; /* margin-top: -3.5px; */
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
