weui.js slider的使用笔记

1、写在前面的废话

最近接触在开发企业微信应用的时候，接触到了weui。用到了其中的slider功能。不知道是不是我用法有误，发现slider存在一定的兼容问题---在pc端和移动端不能很好的兼容。所以在此写个文档，做个小笔记，以后备用。

2、slider的使用

在weui.js中slider的一种用法如下：

[options.step]number slider的step，每次移动的百分比，取值范围 [0-100][options.defaultValue]number0slider的默认百分比值，取值范围 [0-100][options.onChange]function slider发生改变时返回对应的百分比，取值范围 [0-100]html

<div class="weui-slider-box">    <div id="slider" class="weui-slider">        <div class="weui-slider__inner">            <div class="weui-slider__track"></div>            <div class="weui-slider__handler"></div>        </div>    </div>    <div id="sliderValue" class="weui-slider-box__value"></div></div>

js

weui.slider('#slider', {    step: 10,    defaultValue: 40,    onChange: function(percent){        console.log(percent);    }});

这种写法我发现在移动端的slider拖拉效果也不是很好，而且我的项目，得对三个事件作不同的操作（touchstart,touchmove,touchend），所以用到以下方法。

这是一种原生的写法，html和上面的一样，区别就在js上面：

<script type="text/javascript">    $(function(){        var $sliderTrack = $('#sliderTrack'),            $sliderHandler = $('#sliderHandler'),            $sliderValue = $('#sliderValue');        var totalLen = $('#sliderInner').width(),            startLeft = 0,            startX = 0;        $sliderHandler            .on('touchstart', function (e) {                startLeft = parseInt($sliderHandler.css('left')) * totalLen / 100;                startX = e.originalEvent.changedTouches[0].clientX; //移动端               //pc端：e.originalEvent.clientX;           })            .on('touchmove', function(e){                var dist = startLeft + e.originalEvent.changedTouches[0].clientX - startX,                //pc端：e.originalEvent.clientX;                               percent;                dist = dist < 0 ? 0 : dist > totalLen ? totalLen : dist;                percent =  parseInt(dist / totalLen * 100);                $sliderTrack.css('width', percent + '%');                $sliderHandler.css('left', percent + '%');                $sliderValue.text(percent);                e.preventDefault();            })           .on('touchend',function(e){               //代码            }); });</script>

以上的js代码就是slider的一种原生的写法，但是由于touchstart，touchmove，touchend是移动端事件，所以在pc端这段代码是用不了的。网上有很多的说法：用mousedown，mousemove，mouseon来代替上面三个事件，但是个人觉得并不是那么好用。在这里推荐两种pc端的代替写法：

2.1、用h5的drag和drog

对应的将touchstart，touchmove，touchend换成dragstart，drag，dragend。分别表示用户开始拖动元素时触发，用户开始拖动元素时触发，用户完成元素拖动后触发。当然它还有别的一些事件，如：

在拖动目标上触发事件 (源元素):        ondragstart - 用户开始拖动元素时触发        ondrag - 元素正在拖动时触发        ondragend - 用户完成元素拖动后触发释放目标时触发的事件:        ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件        ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件        ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件        ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

有兴趣可以研究一下

2.2、jquery ui draggable

这种要引入jquery-ui对应的css和js文件，但是个人觉得这种挺好用，因为它的api很完善，所以在项目中也是用的这种。

用法如下：

$sliderHandlersubTask.draggable({    axis: "x",//沿x轴拖动   // containment:强制draggable只允许在指定元素或区域的范围内移动，可选值：'parent', 'document', 'window', [x1, y1, x2, y2].       containment:'parent' ,    start: function(e,v) {            },    drag: function(e,v) {            },    stop: function(e,v) {            }});

其实他有很多的参数，在网上能查到，比如：draggable中文文档 以及 英文文档

禁止拖拽事件的方法为：

$sliderHandlersubTask.draggable({//true：禁止，false:允许   disabled: true  });

但是以上的一切发生的基础都是要在索要拖动的元素上加上属性 ”ui-draggable ui-widget-content“

3、总结

以上就是最近的一些总结，希望以后用到的时候自己能有所明白，也希望有需要的朋友可以给你们提供一些参考，初学者，有错的地方还请指教