移动端触摸数字转盘无限滚动实现思路

先看下效果,这个转盘的数字是从0-105,可以设置起始数字,那么之前的数字就变灰,不可选取,点击 加减号,会自动转动4个数字间隔,同时也可以手动触摸拖动,拖到终端105,自动回弹不可再拖动下去,同时选中的数字自动变黄···

好啦看下gif实现效果,或者点击查看,请滑动到第三屏

 

难点分析:

1、因为一个圆是360度,数字按照一定间隔排列比较合理的是18度排一个数字,那么一个圆形只能排列20个数字,其他数字如何生成?

2、如何判断当前选中并且加黄?

3、手指触摸拖动和圆盘转动的换算关系?

4、转动如何更加平滑有一定弹性

5、如何控制相应的数字显示隐藏来达到转盘数字一直增加或者减少的效果?

思路分析:

1、对于第一个问题开始的思路是,当转动时,即将有数字要显示出来,到达尖头指向的位置

那么就先获取它的前一个数字,再去+1,同样的相反方向转动就-1,后来发现这样做很烦躁,很多零界点不好控制,而且有时候反复拖动转盘还会失效,根据以往经验,我判断这样做风险很大,路子没找对,其他方案也想了一些,后来最终确定了一个方案,就是再生成dom的时候直接把所有数字生成好,比如要生成1-105个数字,那么1个数字就转动18度的话,那一共要转动105*18度,然后再拖动圆盘转动的时候,可以通过圆盘转动的角度对应来需要显示的数字,其他数字隐藏

来看生成代码

var deg=18;
var _age=0;
var firstAge=_age;
for (var i=0;i<1908/deg;i++){
    if(i>=20){
//数字是从0开始生成,把大于19的数字先隐藏掉,只显示一圈的数字
//并且把每10个数字编成一组,因为圆盘是每次只能看到10个数字,ageGroup1···
        $("#circleBody .con").append('<div class="hide age age'+i+' ageGroup'+parseInt(i/10)+'" style=" transform: rotate('+(deg*i-90)+'deg); -webkit-transform: rotate('+(deg*i-90)+'deg);" data-deg='+(deg*i-90)+'>'+(i+firstAge)+'</div>')
    }else {
        $("#circleBody .con").append('<div class="age age'+i+' ageGroup'+parseInt(i/10)+'" style=" transform: rotate('+(deg*i-90)+'deg); -webkit-transform: rotate('+(deg*i-90)+'deg);" data-deg='+(deg*i-90)+'>'+(i+firstAge)+'</div>')
    }
}

2、第二个问题,如何判断当前选中的数字变黄

这个问题很简单啦,圆盘转动的角度和