집 > 기사 > 웹 프론트엔드 > zepto를 사용하면 모바일 장치에서 원활하게 위아래로 스크롤할 수 있습니다.

zepto를 사용하면 모바일 장치에서 원활하게 위아래로 스크롤할 수 있습니다.

php中世界最好的语言원래의: 2018-03-26 13:28:473526검색

이번에는 모바일 단말기에서 원활한 스크롤링을 구현하기 위한 zepto를 소개하겠습니다. zepto를 사용하여 모바일 단말기에서 원활한 스크롤링을 구현하기 위한 주의사항은 무엇입니까? 다음은 실제 사례입니다. 봐.

회사의 모바일 프로젝트는 zepto 기반으로 텍스트를 원활하게 스크롤해야 하는 페이지가 있는데, 인터넷에서 정보를 확인해보면 대부분 jquery를 기반으로 하고 있습니다. 약간 수정했지만 터치 위아래로 스크롤할 수는 없습니다. 그래서 zepto의 공식 웹사이트에 가서 API를 확인했는데 zepto의 swipe() 메서드를 사용하려면 캡슐화된 touch.js 파일을 참조해야 한다는 것을 알았습니다. 이 js 파일을 빠르게 인용했지만 실제 테스트에서는 공식 홈페이지에서 제공하는 touch.js 파일은 swipe() 메소드를 적용할 수 없어서 헷갈려서 계속해서 정보를 확인했는데, 인터넷에 zepto에 대한 내용이 거의 없어서 적용이 안되는 것을 발견하지 못했습니다. swipe() 메소드에 적용됩니다. 나중에 우연히 Baidu Cloud Clouda 팀에서 개발한 touch.js를 발견했습니다(현재 js도 이 팀에서 관리하고 있습니다). 이 js 환경에서는 swipe() 메서드를 사용할 수 있어서 빠르게 테스트에 사용했습니다. 결과는 괜찮습니다! Baidu Cloud Clouda 팀에게 특별한 감사의 말씀을 전하고 싶습니다. 정말 대단하십니다! ! ! 여기에서 zepto 자체에는 animate() 메서드가 없다는 점에 유의해야 합니다. 이는 이 메서드를 fx.js로 캡슐화하므로(다운로드하려면 공식 웹사이트로 이동) 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!