weui.js sliderの使用ノート

1、前に書いたくだらない話

最近、企業の微信アプリケーションを開発する際にweuiに触れた.その中のslider機能を使用しました.私の使い方が間違っているかどうか分かりませんが、sliderには一定の互換性の問題があることに気づきました.pc端と移動端ではうまく互換性がありません.だからここにドキュメントを書いて、メモを取って、後で準備します.

2、sliderの使用

ここにいるよjsにおけるsliderの1つの使い方は以下の通りです.
[options.step] number
 
sliderのstep、移動ごとのパーセント、値範囲[0-100]
[options.defaultValue] number 0
sliderのデフォルトパーセント値、値範囲[0-100]
[options.onChange] function
 
sliderが変更された場合、対応するパーセントが返され、値範囲[0-100]
html

js

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

この書き方は移動端のsliderドラッグ効果もよくないことに気づきました.そして私のプロジェクトは、3つのイベントに対して異なる操作をしなければなりません(touchstart、
touchmove,touchend)のため,以下の方法が用いられる.
これは原生的な書き方です.htmlは上と同じで、違いはjsの上にあります.

    $(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 = <span style="color:#FF0000;">e.originalEvent.changedTouches[0].clientX; //   </span>
               <span style="color:#FF0000;">//pc ：e.originalEvent.clientX;</span>
           })
            .on('touchmove', function(e){
                var dist = startLeft + <span style="color:#FF0000;">e.originalEvent.changedTouches[0].clientX</span> - startX,
                <span style="color:#FF0000;">//pc ：e.originalEvent.clientX;</span>               
                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){
               //  
            });
 });

以上のjsコードはsliderの原生的な書き方ですが、touchstart,touchmove,touchendは移動端イベントなのでpc端ではこのコードは使えません.ネット上では、上の3つのイベントの代わりにmousedown、mousemove、mouseonを使うという説がたくさんありますが、個人的にはそれほど使いにくいと思います.ここでは2つのpc端の代替書き方をお勧めします.

2.1、h 5の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、まとめ

以上は最近のまとめですが、后で使う时に自分で理解してほしいし、必要な友达が参考にしてくれることを望んでいます.初心者、间违ったところがあれば教えてください.