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、總結

以上就是最近的一些總結，希望以后用到的時候自己能有所明白，也希望有需要的朋友可以給你們提供一些參考，初學者，有錯的地方還請指教

總結

以上是生活随笔為你收集整理的weui.js slider的使用笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。