ホームページ >ウェブフロントエンド >H5 チュートリアル >zepto により、モバイルデバイスでのシームレスな上下スクロールが可能になります

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

php中世界最好的语言オリジナル: 2018-03-26 13:28:473546ブラウズ

今回は、モバイル端末でシームレスな上下スクロールを実現するための 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 サイトの他の関連記事を参照してください。

php mvc spring jquery html 封装表单验证 JS canvas bug

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：postMessage はクロスドメインおよびクロスウィンドウメッセージングを実装します。次の記事：postMessage はクロスドメインおよびクロスウィンドウメッセージングを実装します。

続きを見る

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

関連記事

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