Heim > Artikel > Web-Frontend > zepto ermöglicht nahtloses Auf- und Abscrollen auf mobilen Geräten

zepto ermöglicht nahtloses Auf- und Abscrollen auf mobilen Geräten

php中世界最好的语言Original: 2018-03-26 13:28:473470Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie mit Zepto ein nahtloses Hoch- und Runterscrollen auf dem mobilen Endgerät realisieren können Fall, werfen wir einen Blick darauf. Das mobile Projekt des Unternehmens basiert auf zepto. Es gibt eine Seite, auf der der Text nahtlos nach oben scrollen muss. Nach Überprüfung der Informationen im Internet basieren die meisten jedoch auf jquery Leicht modifiziert. Wird für mobile Endgeräte verwendet, ein Auf- und Abwärtsscrollen per Touchfunktion ist jedoch nicht möglich. Also ging ich auf die offizielle Website von Zepto, um die API zu überprüfen, stellte jedoch fest, dass ich, wenn ich die swipe()-Methode von Zepto verwenden möchte, auf die gekapselte Datei touch.js verweisen muss, aber im eigentlichen Test habe ich schnell zitiert. Die auf der offiziellen Website angegebene Datei touch.js kann nicht auf die swipe()-Methode angewendet werden, daher war ich verwirrt und habe die Informationen weiter überprüft. Da es im Internet nur wenige Dinge über zepto gibt, habe ich nicht herausgefunden, dass dies nicht möglich ist auf die Methode swipe() angewendet werden. Später entdeckte ich versehentlich ein vom Baidu Cloud Clouda-Team entwickeltes touch.js (derzeit wird das js auch von diesem Team verwaltet. Die swipe()-Methode kann in dieser js-Umgebung verwendet werden, daher habe ich sie schnell zum Testen verwendet). Das Ergebnis ist in Ordnung! Ich möchte dem Baidu Cloud Clouda-Team meinen besonderen Dank aussprechen, Sie sind so großartig! ! ! Hierbei ist zu beachten, dass Zepto selbst keine animate()-Methode hat. Es kapselt diese Methode in fx.js (zum Herunterladen gehen Sie auf die offizielle Website), daher muss fx.js bei Verwendung von animate() in Anführungszeichen gesetzt werden.

Wenn Sie der Meinung sind, dass dieses Plug-in Fehler oder Mängel aufweist, hinterlassen Sie bitte eine Nachricht und ich werde es rechtzeitig ändern, vielen Dank!

Das Folgende ist der vollständige Code des auf Zepto basierenden mobilen Plug-Ins für nahtloses Scrollen nach oben und Berühren nach oben und unten:

HTML-Teil:

Plug-in -in zepto.textSlider.js Teil:

<!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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

/*
* 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);

Empfohlene Lektüre:

Welche Methoden gibt es für die H5-Formularüberprüfung?

spring mvc+localResizeIMG implementiert den H5-Bildkomprimierungs-Upload

Detaillierte Erläuterung der Verwendung der Canvas-Zeichen-API

Das obige ist der detaillierte Inhalt vonzepto ermöglicht nahtloses Auf- und Abscrollen auf mobilen Geräten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：postMessage implementiert domänen- und fensterübergreifendes MessagingNächster Artikel：postMessage implementiert domänen- und fensterübergreifendes Messaging

In Verbindung stehende Artikel

Mehr sehen