ホームページ > 記事 > ウェブフロントエンド > zepto により、モバイル デバイスでのシームレスな上下スクロールが可能になります
zepto により、モバイル デバイスでのシームレスな上下スクロールが可能になります
- php中世界最好的语言オリジナル
- 2018-03-26 13:28:473526ブラウズ
今回は、モバイル端末でシームレスな上下スクロールを実現するための zepto について説明します。 モバイル端末でシームレスな上下スクロールを実現するために zepto を使用するための 注意事項 を以下に示します。一見。
同社のモバイルプロジェクトは、テキストをシームレスにスクロールする必要があるページがありますが、インターネット上の情報を確認したところ、ほとんどはモバイルでも使用できます。若干の変更がありますが、タッチによる上下スクロールは実現できません。そこで、zepto の公式 Web サイトにアクセスして API を確認したところ、zepto の swipe() メソッドを使用するには、カプセル化された touch.js ファイルを参照する必要があることがわかり、すぐにこの js ファイルを引用しましたが、実際のテストでは、公式サイトにある touch.js ファイルは swipe() メソッドに適用できないので、ネット上に zepto に関する情報がほとんどないため、混乱して調べ続けましたが、適用できないことはわかりませんでした。 swipe() メソッドに適用されます。その後、Baidu Cloud Clouda チームが開発した touch.js を偶然発見しました (現在、js もこのチームによって保守されています)。この js 環境では swipe() メソッドが使用できるので、早速テストに使用しました。結果はOKです！ Baidu Cloud Clouda チームに特別な感謝を表したいと思います。本当に素晴らしいです。 ！ ！ここで、zepto 自体には animate() メソッドがないことに注意してください。このメソッドは fx.js にカプセル化されているため (ダウンロードするには公式 Web サイトにアクセスしてください)、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('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);この記事の「方法」の事例を読んだ後は、この方法をマスターしたことになります。さらにエキサイティングな情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
spring mvc+localResizeIMGはH5画像圧縮とアップロードを実現します
以上がzepto により、モバイル デバイスでのシームレスな上下スクロールが可能になりますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。