Maison > Article > interface Web > zepto permet un défilement transparent de haut en bas sur les appareils mobiles

zepto permet un défilement transparent de haut en bas sur les appareils mobiles

php中世界最好的语言original: 2018-03-26 13:28:473526parcourir

Cette fois, je vais vous apporter zepto pour réaliser un défilement transparent de haut en bas sur le terminal mobile. Quelles sont les précautions pour que zepto réalise un défilement transparent de haut en bas sur le terminal mobile. cas, jetons un coup d'oeil.

Le projet mobile de l'entreprise est basé sur zepto. Il existe une page qui nécessite que le texte défile de manière transparente. Cependant, après avoir vérifié les informations sur Internet, la plupart d'entre elles sont basées sur jquery, même si cela peut l'être. légèrement modifié Utilisé pour les terminaux mobiles, mais ne permet pas le défilement tactile de haut en bas. Je suis donc allé sur le site officiel de zepto pour vérifier son API, mais j'ai découvert que si je veux utiliser la méthode swipe() de zepto, je dois référencer son fichier touch.js encapsulé. J'ai rapidement cité ce fichier js, mais dans le test réel, Le fichier touch.js fourni sur le site officiel ne peut pas être appliqué à la méthode swipe(), donc je suis confus et je continue de vérifier les informations. Comme il y a peu de choses sur zepto sur Internet, je n'ai pas découvert que ce n'était pas possible. être appliqué à la méthode swipe(). Plus tard, j'ai accidentellement découvert un touch.js développé par l'équipe Baidu Cloud Clouda (actuellement, le js est également maintenu par cette équipe. La méthode swipe() peut être utilisée dans cet environnement js, je l'ai donc rapidement utilisée pour les tests). Le résultat est OK ! Je voudrais exprimer mes remerciements particuliers à l'équipe Baidu Cloud Clouda, vous êtes tellement génial ! ! ! Il convient de noter ici que zepto lui-même n'a pas de méthode animate(). Il encapsule cette méthode dans un fx.js (allez sur le site officiel pour télécharger), donc fx.js doit être cité lors de l'utilisation d'animate().

Si vous pensez que ce plug-in présente des bugs ou des déficiences, merci de laisser un message et je le modifierai à temps, merci !

Ce qui suit est le code complet du plug-in coulissant de défilement fluide vers le haut et de retouche mobile basé sur zepto :

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

Plug -dans zepto.textSlider.js Partie :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture recommandée :

Quelles sont les méthodes de vérification du formulaire H5

spring mvc+localResizeIMG implémente le téléchargement de la compression d'image H5

Explication détaillée de l'utilisation de l'API de dessin sur toile

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：postMessage implémente la messagerie inter-domaines et multi-fenêtresArticle suivant：postMessage implémente la messagerie inter-domaines et multi-fenêtres

Articles Liés

Voir plus