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

有了webview，你们开发ios或者安卓的app就方便不少啦。

第一能够增量更新；

第二webview能够同时兼容ios和安卓，减小开发量哦。

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

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

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

效果说明：

一、页面展现效果为：

 

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

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

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

 

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

1、功能点：

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

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

 

2、设计思路：

设计三个函数，分别是：

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

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

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

 

3、代码实现：

一、获取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>

//一、getPosition(_dom)
    function getPosition(dom){ _dom = dom; var _x = parseInt(_dom.offsetLeft); return _x + 18; }

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

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

tips:

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

//二、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; }

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

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

tips:

这里得到的位置，都是数字。因此须要加上+"px"。

//三、moveTo
    function moveTo(start,end){ var _startX = getPosition(_btn); var _endX = nearList(end); _btn.style.left = _endX - 76 + "px"; }

 

4、效果事件：

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

//点击bar的事件
    _bar.onclick = function(e){ moveTo(0,e.clientX); }

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

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