weui.js slider的使用笔记

1、写在前面的废话

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

2、slider的使用

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

[options.step]	number		slider的step，每次移动的百分比，取值范围 [0-100]
[options.defaultValue]	number	0	slider的默认百分比值，取值范围 [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、总结

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