当前位置: 首页 > 工具软件 > weui.js > 使用案例 >

weui.js slider的使用笔记

司寇书
2023-12-01

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

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










 类似资料: