最近项目需要加一个导航页，页面有个简单的指示器功能，本来这个东西ui用图画好就可以，但是那样的指示器是死的，小圆点不会随着页面的滑动而滑动。

我们需要的是上图这种效果。

这也很简单，网上一大推实现好的，随便找一个来用就好了；但是，有一个问题，网上的这类开源项目，要么会包含其他东西，要么支持的场景很多，导致代码很多，还有些项目会有些bug，看别人的代码解bug，痛苦你们懂的。寻思着，反正简单，就自己做，按照要求来，尽量不要那么臃肿。

首先，设计，需求是什么，需要哪些变量？

需求是需要根据页面滑动而滑动的指示器。

需要哪些变量？从上图，有3个静止不动的圆，还有一个不断滑动的圆。三个静止不动的圆需要的控制变量：x、y圆心坐标，圆的颜色emptyColor(有些人可能觉得需要3个x、y，其实不用)，emptyPaint画笔；动态圆需要的控制变量：moveX、moveY圆心坐标，圆的颜色fillColor，fillPaint画笔；公共变量：radius圆半径(每个圆大小都一样)，strokeWidth画笔宽度，divideWidth静止的圆之间的距离。

上述哪些变量是否够了呢？上面的变量足够画出指示器，但是还不够，指示器数量被限制在3个了，为了扩展性，还需要加一个变量circleCount静止的圆个数；还有一个被忽略的参数：比例。一般动态圆从一个静止的圆滑动到另一个静止的圆时，页面要滑过页面，页面滑动的距离和动态圆滑动的距离有一个比例：ratio。这样变量基本完备了，下面是代码片段了。

囧，好像没找到简书中添加代码的选项...那复制吧

1、自定义属性

2、代码

3、使用

第一次在简书上发，用的富文本编辑，效果好像不是很好，下次尝试用Markdown试试。