最近项目需要加一个导航页,页面有个简单的指示器功能,本来这个东西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试试。
网友评论