zepto 的 swipe()方法无法使用 touch.js 文件？原因在这里

移动端做开发时，用个无缝滚动功能能让用户体验好很多。用Zepto这个工具就能搞定，滑动起来特顺畅。咱们就来聊聊怎么用它实现往上滚的无缝效果，还有几个要注意的地方。

选择合适的库

用Zepto不用jQuery，就因为它轻巧点，方便咱们手机上用！虽然网上有好多jQuery的教程，但不一定都能给我们的手机用。其实Zepto这个API简单明了，功能还挺强，特别是在搞触屏那块儿。

接下来，咱们得确认下引入的Zepto插件对不对，尤其是那个叫touch.js的文件。它可是实现触摸滚动功能的关键！有时候官网上给的版本用起来不太稳定，这时候就要换个靠谱点的来用用，比如说百度云Clouda团队维护的那版。

实现无缝滚动

想要顺利实现无缝滚动，你得用好Zepto里的animate()方法。这个方法虽然不是Zepto本身自带的，但它可以通过FX.js插件来获取到。在做项目时候别忘了把FX.js给加上去！

搞定这个得有HTML和JavaScript帮忙。HTML这块，咱们搞个箱子把要拖动的文字放进去；然后JavaScript就得干活了，控制拖动，处理那些触摸屏幕的事情。

处理触摸事件

nbsp;html>

*{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;}

  

手机上，手势触摸可是大事儿！用Zepto的swipe()函数，就可以轻松应对大家的滑动手势。不过别忘了，得保证你用的thistouch.js是支持的版本哦～

在码代码时，要给那个容器添加swipe的功能，然后在处理动作里让它上滚或下滑。这样滑动就能顺畅了，用起来更舒坦。

调试与优化

做啥都会碰到困难，比如无缝滚动就是这样。在测试的时候，我们得看看它滑不溜秋、摸上去顺不顺畅啦这些小毛病。

优化工作就几个重点：避免重复地大肆搞DOM操作，用requestAnimationFrame优化动画，再就是要保证所有设备和浏览器上都能稳稳跑起来！

总结与展望

/*
* 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 _this.height()){
              for(i=0;i _this.height()){
              marquee(_this, speed);
            }
        });        
    });
  }
})(Zepto);

经过这几步，一款能用在手机上的免费滑动插件就做好！这款插件让你的手机更顺手，同时也是个学好用好Zepto的绝佳机会。

将来，我们会利用高科技来更好地完善这个小程序，比如增设更多可定制的功能，甚至让它支持更多互动模式！

说到底，各位都有什么经验教训？实现这种功能时有啥难题没，你们是咋克服的呀？快来评论区说说，咱们互相学习，共同进步！