废话不多说先上成果图
实现思路
主要分界面与逻辑两大块
界面分为5个部分
- 左滑块长度
- 左内容位置
- 中间长度
- 右滑块长度
- 右内容位置
逻辑
- touch3个事件
- 各滑块长度及位置计算
- 选中时变色
具体实现步骤
- 首先我们明白整个容器的长度是不变的等于左边+中间+右边所以我们可以通过先获取总的容器的宽度并用变量进行保存,这里我用的就是屏幕的宽度。
this.rangeWidth = document.body.clientWidth
- 添加vue的三种touch事件
@touchstart.stop.prevent="leftTextTouchStart" //按下
@touchmove.stop.prevent="leftTextTouchMove" //滑动
@touchend.stop.prevent="leftTextTouchEnd" //松开//右滑块,同上
@touchstart.stop.prevent="rightTextTouchStart"
@touchmove.stop.prevent="rightTextTouchMove"
@touchend