基于webview的选择滑动控件（PC和wap版）

有了webview，大家开发ios或者安卓的app就方便很多啦。

第一可以增量更新；

第二webview可以同时兼容ios和安卓，减少开发量哦。

----------------------------------------------------

下面详细解说，一个webview的滑动控件是如何制作的。

----------------------------------------------------

效果说明：

1、页面展示效果为：

 

2、点击“距离”按钮，弹出“选择控件”

3、点击距离控件，或者拖动小圆点，都可以选择合适的距离哦。

展示地址：http://zhaoziang.com/uiweb/selcontrol/list.htm

 

-------------------------------------------------------------

一、功能点：

1、点击控件，让小圆点跳到正确位置

2、拖动小圆点，让其跟随，并停在正确的位置

 

二、设计思路：

设计三个函数，分别是：

1、获取dom元素的当前位置。getPosition(_dom)

2、根据当前位置x，判断小圆点悬停位置的一个附近列表，该控件有6个可以悬停的地方。nearList(x)

3、让小圆点跳到正确位置的动画效果。moveTo(start,end)

 

三、代码实现：

1、获取dom元素的当前位置。getPosition(_dom)

输入：传入参数，dom元素。先获取到dom元素。

    var _btn = document.getElementById("dragbtn");

    var _bar = document.getElementById("list_sel");

输出：该dom元素的位置。

tips:

1) 注意需要使用parseInt，将获取到的offsetLeft转换为数字。而在使用数字的时候，记得要加上+"px“，这样left属性才能正确识别哦。

2) 这里取元素的left值，使用dom.style.left，是取不到值的，应该使用offsetLeft。使用dom.style.left的场景，应该是left属性写在html里的，像这样<div style="left:10px"></div>

//1、getPosition(_dom)

    function getPosition(dom){

        _dom = dom;

        var _x = parseInt(_dom.offsetLeft);

        return _x + 18;

    }

2、根据当前位置x，判断小圆点悬停位置的一个附近列表，该控件有6个可以悬停的地方。nearList(x)

这里是，只需要修改起点_start ，和间隔_space。就能获得整个附近列表的设计。这样子不用每次都去修改N个地方的参数。

tips:

大于>，小于<，等于=，大于等于>=，小于等于<=都是二元操作符。所以在if判断的时候，如果有两个以上的判断时，使用与&&符号来连接。就像：1<x && x<9。而不是写成1<x<9，这样是无法识别的。

//2、nearList

    function nearList(x){

        var _movetox = 0;

        var _start = 78; //起点

        var _space = 56; //两点之间的间隔px        

        var _nearlist = [_start,

                        _start+_space,

                        _start+2*_space,

                        _start+3*_space,

                        _start+4*_space,

                        _start+5*_space];

        var _x = x;                    

        if(_x<=_nearlist[0]){

            _movetox = _nearlist[0];

        }

        else if(_nearlist[0]<_x && _x<=_nearlist[0]+_space/2){

            _movetox = _nearlist[0];

        }

        else if(_nearlist[1]-_space/2<_x && _x<=_nearlist[1]+_space/2){

            _movetox = _nearlist[1];

        }

        else if(_nearlist[2]-_space/2<_x && _x<=_nearlist[2]+_space/2){

            _movetox = _nearlist[2];

        }

        else if(_nearlist[3]-_space/2<_x && _x<=_nearlist[3]+_space/2){

            _movetox = _nearlist[3];

        }

        else if(_nearlist[4]-_space/2<_x && _x<=_nearlist[4]+_space/2){

            _movetox = _nearlist[4];

        }

        else if(_nearlist[5]-_space/2<_x && _x<=_nearlist[5]+_space/2){

            _movetox = _nearlist[5];

        }

        else if(_x>_nearlist[5]){

            _movetox = _nearlist[5];

        }

        return _movetox;

    }

3、让小圆点跳到正确位置的动画效果。moveTo(start,end)

起点_startX是dom元素的位置，终点_endX是根据附近列表选择的。动画效果，使用延时来修改left的值。

tips:

这里获得的位置，都是数字。所以需要加上+"px"。

//3、moveTo

    function moveTo(start,end){

        var _startX = getPosition(_btn);

        var _endX = nearList(end);

        _btn.style.left = _endX - 76 + "px";

    }

 

四、效果事件：

1、给控件bar添加点击事件，让小圆点跳到正确的地方：

//点击bar的事件

    _bar.onclick = function(e){

        moveTo(0,e.clientX);

    }

2、给小圆点添加拖拽事件。

drag事件，是用onmousedown，onmouseup，onmousemove三个事件，加上一个isdrag开关来实现的。

具体实现方式是：

开关先关掉isdrag=false；

当鼠标按下onmousedown，触发开关isdrag=true；

然后开始拖动onmousemove；

当鼠标松开onmouseup时，关掉开关isdrag=false。

//拖动btn的事件

    var _isdrag=false;

    var myX;

    var dobj;

    function movemouse(e){

        if (_isdrag)

        {

            dobj.style.left = tx + e.clientX - myX + "px";

            return false;

        }

    }

    function moving(e){

        var fobj = event.srcElement;

        if (fobj.id=="dragbtn"){

            _isdrag = true;

            dobj = fobj;

            tx = parseInt(dobj.style.left+0);

            myX = e.clientX;

            document.onmousemove = movemouse;

            return false;

        }

    }

    document.onmousedown = moving;

    document.onmouseup = function(e){

        _isdrag = false;

        moveTo(0,e.clientX);

    }

 

--------------------------------------------------------

PC版：

DOM结构设计，CSS样式，以及全部源代码，请到展示地址查看：

http://zhaoziang.com/uiweb/selcontrol/list.htm

 --------------------------------------------------------

wap版：

 

手机浏览器上（指ios和android机器）的触屏事件，与PC上的鼠标事件，有所对应，分别为：

ontouchstart == onmousedown

ontouchend == onmouseup

ontouchmove == onmousemove

 

获取元素位置的方法也有所不同：

e.touches[0].pageX == e.clientX

 

针对上述两个不同，对于wap端，做了改进。

详情请用手机浏览器访问：http://zhaoziang.com/uiweb/selcontrol/index.htm

 

效果图：