Home >Web Front-end >H5 Tutorial >zepto enables seamless scrolling up and down on mobile devices

zepto enables seamless scrolling up and down on mobile devices

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

This time I will bring you zepto to achieve seamless scrolling up and down on the mobile terminal. What are the precautions? Here are the actual cases, let’s take a look.

The company's mobile project is based on zepto. There is a page that requires the text to scroll up seamlessly. However, after checking the information on the Internet, most of them are based on jquery, although it can be modified slightly. Used for mobile terminals, but touch scrolling up and down cannot be achieved. So I went to zepto's official website to check its API, but found that if I want to use zepto's swipe() method, I need to reference its encapsulated touch.js file. I quickly quoted this js file, but in the actual test, The touch.js file given on the official website cannot be applied to the swipe() method, so I was confused and continued to check the information. Since there are few things about zepto on the Internet, I did not find out that it cannot be applied to the swipe() method. s reason. Later, I accidentally discovered a touch.js developed by Baidu Cloud Clouda team (currently, the js is also maintained by this team). The swipe() method can be used in this js environment, so I quickly used it for testing. The result is OK! I would like to express my special thanks to the Baidu Cloud Clouda team, you guys are awesome! ! ! It should be noted here that zepto itself does not have an animate() method. It encapsulates this method into an fx.js (go to the official website to download), so fx.js must be quoted when using animate().

If you think there are bugs or deficiencies in this plug-in, please leave a message and I will modify it in time, thank you!

The following is the complete code of the zepto-based mobile seamless scroll up and touch up and down sliding plug-in:

HTML part:

<!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-in zepto.textSlider.js part:

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

zepto enables seamless scrolling up and down on mobile devices

Related articles