微信小程序如何制作支持滑动的长尾词进度条？

本文共计756个文字，预计阅读时间需要4分钟。

微信小程序项目需求，需实现一个带滑动块并可左右滑动的进度条，查看小程序文档，发现现有的progress组件无法满足需求，因此我自行编写了一个，以下总结：

一、效果图（此处插入效果图）

二、实现

1.使用canvas绘制进度条和滑动块

2.添加触摸事件监听，实现滑动块左右滑动

3.根据滑动块位置计算进度值

4.使用动画效果使进度条平滑变化

微信小程序项目需求，要实现一个带滑块并可左右滑动的进度条，看了小程序的文档，发现上面的progress组件无法满足需求，所以我自己写了一个，在这里总结一下。

一、效果图

二、实现逻辑

功能实现的逻辑比较简单，这里简单说明一下：

1、首先用一个标签将相关代码包裹起来，加上静态定位；
2、画两条一模一样的线条，其中一条加上相对定位改变线条的颜色，动态设置它的宽度；
3、画一个滑块，使用相对定位定到线条上面，给它加bindtouchmove事件，获取它距离左边的宽度，然后对应设置上去即可。