zepto により、モバイル デバイスでのシームレスな上下スクロールが可能になります

今回は、モバイル端末でシームレスな上下スクロールを実現するための zepto について説明します。 モバイル端末でシームレスな上下スクロールを実現するために zepto を使用するための 注意事項 を​​以下に示します。一見。

同社のモバイルプロジェクトは、テキストをシームレスにスクロールする必要があるページがありますが、インターネット上の情報を確認したところ、ほとんどはモバイルでも使用できます。若干の変更がありますが、タッチによる上下スクロールは実現できません。そこで、zepto の公式 Web サイトにアクセスして API を確認したところ、zepto の swipe() メソッドを使用するには、カプセル化された touch.js ファイルを参照する必要があることがわかり、すぐにこの js ファイルを引用しましたが、実際のテストでは、公式サイトにある touch.js ファイルは swipe() メソッドに適用できないので、ネット上に zepto に関する情報がほとんどないため、混乱して調べ続けましたが、適用できないことはわかりませんでした。 swipe() メソッドに適用されます。その後、Baidu Cloud Clouda チームが開発した touch.js を偶然発見しました (現在、js もこのチームによって保守されています)。この js 環境では swipe() メソッドが使用できるので、早速テストに使用しました。結果はOKです！ Baidu Cloud Clouda チームに特別な感謝を表したいと思います。本当に素晴らしいです。 ！ ！ここで、zepto 自体には animate() メソッドがないことに注意してください。このメソッドは fx.js にカプセル化されているため (ダウンロードするには公式 Web サイトにアクセスしてください)、animate() を使用する場合は fx.js を引用符で囲む必要があります。

このプラグインにバグや欠陥があると思われる場合は、メッセージを残してください。すぐに修正します。ありがとうございます!

以下は、zepto ベースのモバイルのシームレスなスクロールアップとタッチ上下スライド プラグインの完全なコードです:

HTML 部分:

nbsp;html>


<meta>
<meta>
<title>无标题文档</title>
<style>
*{margin:0;padding:0}
li{list-style:none;}
.box{margin:20px;width:200px;height:128px;overflow:hidden;border:1px solid #ccc;padding:5px 10px 15px;font-size:14px;}
.box ul li{line-height:20px;}
</style>


<p>
  </p>

    
• 11111111111222222
    
• 2222222202
    
• 3333333303
    
• 4444444404
    
• 5555555505
    
• 6666666606
    
• 1111111111
    
• 2222222202
    
• 3333333303
    
• 4444444404
    
• 5555555505
    
• 6666666606
  

<script></script> <script></script> <script></script> <script></script> <script> $(function(){ $(".box").textSlider({ speed: 50, //数值越大，速度越慢 line:10 //触摸翻滚的条数 }); }) </script> プラグイン zepto.textSlider.js 部分:

/*
* textSlider 0.1
* Copyright (c) 2014 tnnyang 
* Dependence Zepto v1.1.6 & fx.js & touch-0.2.14.min.js
* Author by 小坏
*/ 
(function($){
    $.fn.textSlider = function(options){
    //默认配置
    var defaults = {
        speed:40,  //滚动速度,值越大速度越慢
        line:1     //滚动的行数
    };
    
    var opts = $.extend({}, defaults, options);
    
    var $timer;
    function marquee(obj, _speed){                                              
        var top = 0;
        var margintop;
        $timer = setInterval(function(){            
            top++;
            margintop = 0-top;
            obj.find("ul").animate({
                marginTop: margintop
                },0,function(){
                    var s = Math.abs(parseInt($(this).css("margin-top")));                                
                    if(s >= 20){
                        top = 0;
                        $(this).css("margin-top", 0);   //确保每次都是从0开始，避免抖动
                        $(this).find("li").slice(0, 1).appendTo($(this));                
                    }
                });                        
        }, _speed);
      }
      
    this.each(function(){            
        var speed = opts["speed"],line = opts["line"],_this = $(this);
        var $ul =_this.find("ul");
        if($ul.height() > _this.height()){            
            marquee(_this, speed);
        }
        
        //触摸开始
        _this.on('touchstart', function(ev){
            ev.preventDefault();
            clearInterval($timer);
        });
        
        //向上滑动
        _this.on('swipeup', function(ev){
            ev.preventDefault();
            clearInterval($timer);
            if($ul.height() > _this.height()){    
               for(i=0;i<opts.line> _this.height()){
              for(i=0;i<opts.line> _this.height()){
              marquee(_this, speed);
            }
        });        
    });
  }
})(Zepto);</opts.line></opts.line>

この記事の「方法」の事例を読んだ後は、この方法をマスターしたことになります。さらにエキサイティングな情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

H5フォーム検証の方法とは何ですか?

spring mvc+localResizeIMGはH5画像圧縮とアップロードを実現します

Canvasの描画APIの使用方法の詳細な説明

以上がzepto により、モバイル デバイスでのシームレスな上下スクロールが可能になりますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。