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>

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、总结

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