废话不多说，我们先上结果图，实现接口和逻辑的主要思想。界面分为5个部分。左侧滑块长度，左侧内容位置，中间长度，右侧滑块长度，右侧内容位置，逻辑touch3事件，每个滑块长度和位置计算选中时的颜色变化。具体实施步骤。首先，我们了解到整个容器的长度是恒定的，等于左+中+右，所以我们可以先获取容器的总宽度，用一个变量保存。这里我使用屏幕的宽度。this.rangeWidth=document.body.clientWidth添加vue的三个触摸事件@touchstart.stop.prevent="leftTextTouchStart"//press@touchmove.stop.prevent="leftTextTouchMove"//slide@touchend.stop.prevent="leftTextTouchEnd"//松开//右滑块，同上@touchstart.stop.prevent="rightTextTouchStart"@touchmove.stop.prevent="rightTextTouchMove"@touchend.stop.prevent="rightTextTouchEnd"使用类绑定，方式touchStart事件触发，修改点击滑块的样式，释放时触发touchend事件，恢复原来样式//滑动事件方法leftTextTouchStart(){this.leftClick=true;},leftTextTouchEnd(){this.leftClick=false;},//类样式binding:class="{check_text_div:leftClick}"计算滑动时三个核心块的宽度和位置，因为滑动时坐标轴是实时变化的，这里我们使用vue属性操作的计算rangeWidth//整个容器的宽度leftWidth//左滑的距离，由slide事件定义rightWidth//右滑的距离，由slide事件定义width(){returnMath.min(Math.max(0,this.rangeWidth-this.leftWidth-this.rightWidth),this.rangeWidth)//内容宽度应该是等于总宽度减去左右边，且大于等于0且小于等于总宽度}left(){returnMath.max(this.leftWidth,0)//防止左边从滑出界面}right(){if(this.left+this.rightWidth<=this.rangeWidth)returnMath.max(this.rightWidth-0.5,0)//防止右滑出界面}在滑动事件，界面变化并记录滑动距离leftTextTouchMove(e){lettouch=e.changedTouches[0];letclientX=touch.clientX;//获取滑动事件的横坐标值if(clientX>=0){//只检测滑动条的坐标值是否在屏幕内if(this.left+this.right<=this.rangeWidth){//防止左右滑块位置倒置this.leftWidth=clientX;//左边滑块的距离等于x坐标//接口操作$('#nowRange').css({'左':this.left,'宽度':this.width});$('#leftText').css({'left':this.left});$('#leftImg').css({'左':this.left});}}}rightTextTouchMove(e){lettouch=e.changedTouches[0];letclientX=touch.clientX;//获取滑动事件的横坐标值if(clientX<=this.rangeWidth){//只检测滑动条的坐标值是否在屏幕内this.rightWidth=this.rangeWidth-CclientX;//右边滑块的距离等于总长度减去滑动横坐标if(this.left+this.right<=this.rangeWidth){//防止左右滑块反转//接口更改$('#nowRange').css({'width':this.width});$('#rightText').css({'right':this.right});$('#rightImg').css({'right':this.right});}}}},6.文本内容可以通过计算值来实现leftText(){letnum=parseInt(this.left/this.rangeWidth*100);如果（num===0||isNaN（num））返回“无限”；returnnum+'k';}rightText(){if(this.rangeWidth===0)return'unlimited';让num=parseInt((this.rangeWidth-this.right)/this.rangeWidth*100);if(num>=0){if(num===100)返回'unlimited';返回数字+'k'；}}核心代码就这些了，撒花就结束了，优化什么的，大家可以自己看。这是我的github，欢迎戳戳，不定时更新
