zepto实现移动端无缝向上下滚动

来源：动视网责编：小采时间：2020-11-27 15:06:01

zepto实现移动端无缝向上下滚动

zepto实现移动端无缝向上下滚动:这次给大家带来zepto实现移动端无缝向上下滚动，zepto实现移动端无缝向上下滚动的注意事项有哪些，下面就是实战案例，一起来看一下。公司的移动端项目是基于zepto的，有一个页面要求文字能够无缝地不停向上滚动，但查了网上的资料，大多都是基于jquery

推荐度：

点击下载本文 文档为doc格式

导读zepto实现移动端无缝向上下滚动:这次给大家带来zepto实现移动端无缝向上下滚动，zepto实现移动端无缝向上下滚动的注意事项有哪些，下面就是实战案例，一起来看一下。公司的移动端项目是基于zepto的，有一个页面要求文字能够无缝地不停向上滚动，但查了网上的资料，大多都是基于jquery

这次给大家带来zepto实现移动端无缝向上下滚动，zepto实现移动端无缝向上下滚动的注意事项有哪些，下面就是实战案例，一起来看一下。

公司的移动端项目是基于zepto的，有一个页面要求文字能够无缝地不停向上滚动，但查了网上的资料，大多都是基于jquery的，虽然稍作修改就可以用于移动端，但不能实现触摸上下翻滚。所以就去了zepto的官网查看其API，却发现如果要使用zepto的swipe()方法，需要引用其已经封装好的touch.js文件，我就赶紧引用了这个js文件，可在实际测试中，官网给出的touch.js文件不能适用于swipe()方法，于是，一头雾水，继续查资料，由于网上关于zepto方面的东西较少，所以，也没有找出其不能适用于swipe()方法的原因。后来，不经意间发现由百度云Clouda团队开发的一个touch.js（目前，该js也是由这个团队在维护），在这个js环境下居然能使用swipe()方法，于是，赶紧拿来测试。结果很OK哇！这里要着重感谢百度云Clouda团队，你们真牛！！！在这里要注意，zepto本身是没有animate()方法的，它是将这个方法封装成了一个fx.js（去官网下载），所以在使用animate()时要引用fx.js。

若您觉得本插件有bug或不足之处，请留言，我将及时修改，谢谢！

以下是基于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('swipedown', 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('touchend',function(ev){
 ev.preventDefault();
 if($ul.height() > _this.height()){
 marquee(_this, speed);
 }
 }); 
 });
 }
})(Zepto);

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

zepto实现移动端无缝向上下滚动

推荐度：

点击下载本文 文档为doc格式

标签：实现滚动滑动

热门焦点

zepto实现移动端无缝向上下滚动

zepto实现移动端无缝向上下滚动

zepto实现移动端无缝向上下滚动

最新推荐

猜你喜欢

热门推荐