zepto により、モバイルデバイスでのシームレスな上下スクロールが可能になります-H5 チュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-03-26 13:28:47

オリジナル

3540 人が閲覧しました

今回は、モバイル端末でシームレスな上下スクロールを実現するための 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 部分:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<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>
</head>
<body>
<p class="box">
  <ul>
    <li>11111111111222222</li>
    <li>2222222202</li>
    <li>3333333303</li>
    <li>4444444404</li>
    <li>5555555505</li>
    <li>6666666606</li>
    <li>1111111111</li>
    <li>2222222202</li>
    <li>3333333303</li>
    <li>4444444404</li>
    <li>5555555505</li>
    <li>6666666606</li>
  </ul>
</p>
<script src="zepto.min.js"></script>
<script src="fx.js"></script>
<script src="touch-0.2.14.min.js"></script>
<script src="zepto.textSlider.js"></script>
<script>
$(function(){
    $(".box").textSlider({
        speed: 50, //数值越大，速度越慢
        line:10    //触摸翻滚的条数
    });
    })
</script>
</body>

ログイン後にコピー

プラグイン 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;i++){
                    $ul.find("li").first().appendTo($ul);
                   }
                $ul.css("margin-top",0);
            }
        });
        
        //向下滑动
        _this.on(&#39;swipedown&#39;, function(ev){
            ev.preventDefault();
            clearInterval($timer);
            if($ul.height() > _this.height()){
              for(i=0;i<opts.line;i++){
                  $ul.find("li").first().before($ul.find("li").last());    
                  }                                             
                $ul.css("margin-top",0);
            }
        });
        
        //触摸结束
        _this.on(&#39;touchend&#39;,function(ev){
            ev.preventDefault();
            if($ul.height() > _this.height()){
              marquee(_this, speed);
            }
        });        
    });
  }
})(Zepto);

ログイン後にコピー

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

推奨読書:

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

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

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

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