在一些需要用户填写信息的业务场景中，有时会要求用户选择某个业务范围，这时候就需要一个滑块进度条。然后你喜欢的产品经理会说，给我一个颜色可控的滑块，滑块按钮可大可小，滑块边框可大可小。无法使用小程序的原生滑块组件。因为这个东西在样式上不能自由配置，我只好手动实现一个。结构设计没问题，那就去做吧。首先，滑块从俯视图的角度可以分为三层。它们是用于用户操作的底部轨道区域、进度条区域和滑块本身。在结构设计上，可以将底轨区域和进度条区域一分为二，让进度条区域可以根据滑块的高度变化，宽度由js控制。此外，还需要对外暴露一些参数，使其可以定义自己的长、厚、宽。Component({/***组件属性列表*/properties:{//滑块大小blockSize:{type:Number,value:32,},//滑块宽度blockBorderWidth:{type:Number,value:3},//railheightheight:{type:Number,value:2},//railprogressstep:{type:Number,value:0,},//进度值小数位：{type:Number,value:0,},},});.slider-wrap{位置：相对；显示：弹性；对齐项目：居中；宽度：100%；}.silder-bg,.silder-bg-inner,.silder-block{position:absolute;左：0；}.silder-bg，.silder-bg-inner{宽度：100%；高度：2rpx；弹性：1；}.silder-bg{溢出：隐藏；背景色：#eeeeee；边界半径：8rpx；z-index:0;}.silder-bg-inner{高度:100%;背景色：#66a6ff；/*边界半径：8rpx；*/z-index:1;border-bottom-left-radius:8rpx;border-top-left-radius:8rpx;}.silder-block{width:32rpx;高度：32rpx；-颜色：#ffffff；边框：实心3rpx#66a6ff；z-指数：2；边界半径：50%；box-sizing:border-box;}点击行为事件滑块进度条的滑块是一个听话的孩子，也就是说，我们叫它去哪里它就听话，千万别抓着它煲汤~在组件的外部容器中绑定一个点击事件，我们必须知道用户的点击位置，在bind:tap事件的clientX属性中获取。另外，还需要获取进度条的位置信息。得到这两个关键数据后，将进度条组件的偏移量减去ClintX用户点击的位置，就可以得到相对于组件中进度的进度。然后用组件的宽度减去进度再乘以100就得到了当前进度的百分比。同时，为了防止进度条超出进度条，如下图：((191-36)/301)*100≈52这样，事件就完成了~滑动事件完成点击事件后，我们要让它自由滑动进度条。进度条组件的拖动过程大致是：点击滑块->拖动滑块->松开滑块这三个步骤。因此，和H5一样的思路，我们只需要监听touchmove、touchstatr、touchend这三个事件即可。首先，听touchmove。用户点击滑块后，记录当前的clientX属性，然后需要记录当前进度和滑块的偏移量；touchmove事件关联外层容器，更新滑动距离。由于touchmove中的拖拽事件逻辑不能随便触发，所以需要加一个markedlock；touchend事件触发后释放锁：originPercentage=this.data.percentage;this.data._startTouchX=evt.changedTouches[0].clientX;},//滑块移动onTouchMove(evt){const{moving,containerInfo}=this.data;if(!moving||!containerInfo)return;const{clientX}=evt.changedTouches[0];const{digits,originPos,originPercentage,_startTouchX,_maxDistance}=this.data;//计算偏移量constcomputeOffset=(maxVal)=>{returnthis._computeOffset(clientX,_startTouchX,maxVal);}//实际百分比constperc=originPercentage+computeOffset(100);constpercentage=this._boundaryHandler(perc);//滑块倾斜度constoffset=originPos+computeOffset(_maxDistance);const_blockOffset=this._boundaryHandler(offset,_maxDistance);this.setData({percentage,_blockOffset});this.triggerEvent('change',{value:percentage.toFixed(digits)*1});},onTouchEnd(evt){this.data.movi??ng=false;},}})总结一下，以上就是滑块进度条组件的实现~其实还有更多的配置选项这个组件。颜色值，背景控制等基本的东西就不再继续讨论了~本文以一个小程序为例，但是思路是通用的，同样的思路可以用在H5中实现，但区别只是API~WeChat代码片段，大家可以直接拿来用2019/05/04更新：再看一遍，发现这个组件还有优化的空间：操作不必限制到slider，bindtap事件可以丢弃，剩下的所有事件都委托给最外层的节点。touchstar在渲染位置信息的同时，也允许其自由滑动：“高度：{{height}}rpx;”>Component({//其他选项...方法：{//其他方法...onTouchStart(evt){this.data.movi??ng=true;const{containerInfo}=this.data;if(!containerInfo)return;const{clientX}=evt.changedTouches[0];const{digits,_maxDistance}=this.data;constcomputeOffset=(maxVal)=>{returnthis._computeOffset(clientX,containerInfo.left,maxVal);}//滑块偏移const_blockOffset=this._boundaryHandler(computeOffset(_maxDistance),_maxDistance);//实际百分比constpercentage=this._boundaryHandler(computeOffset(100));//记录原始坐标this.data.originPos=_blockOffset;this.data.originPercentage=百分比；this.data._startTouchX=clientX;this.setData({_blockOffset,percentage});this.triggerEvent('change',{value:percentage.toFixed(digits)*1});},}});微信代码片段v0.0.2原文来自：【UI组件】来做一个可配置的滑块进度条
