基于zepto写的几个常用小东西（toast、加载器、上拉加载、下拉刷新）

最新推荐文章于 2020-02-28 22:06:00 发布

原创最新推荐文章于 2020-02-28 22:06:00 发布 · 3.2k 阅读

CC 4.0 BY-SA版权

3 篇文章

订阅专栏

本文介绍了如何使用zepto.js库实现常见的UI组件，包括自定义的toast提示框，加载动画效果，上拉加载更多内容的功能，以及下拉刷新页面的交互。通过监听滚动事件和触摸事件，结合定时器和DOM操作，实现了这些实用的前端交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于zepto的自定义toast、load加载效果

//显示一个消息，会在2秒钟后自动消失

//toast参数可选，三种是文字、时间、以及class的类

$.toast = function(msg, duration, extraclass) {

var $toast = $('<div class="modal toast ' + (extraclass || '') + '">' + msg + '</div>').appendTo(document.body);

var aa=$toast.offset();

var left=-(aa.width)/2;

//样式会设置toast的padding，因此要动态获取宽度，然后margin回去 才能居中

$toast.css("margin-left",left);

setTimeout(function(){

$toast.remove();

},2000);

};

//加载器 

$.showPreloader=function(){

var $showPreloader= $('<div class="modal2 loader">' + '<img src="loading.gif">'+'</div>').appendTo(document.body);

$showPreloader.css("display","block");

}

$.hidePreloader=function(){

$("body").find(".loader").css("display","none").remove();

}

//上拉加载

原理 监听滚动条事件

$(window).on("scroll",function(){

var aa=$(document).height();

var bb=$(this).scrollTop();

var cc=$(this).height();

var dd=aa-bb-cc;

if(dd<50){

$(".js-load-more").show();

var html='<p>22222222222222222222222222</p><p>22222222222222222222222222</p><p>22222222222222222222222222</p><p>22222222222222222222222222</p>';

//请求数据，然后添加内容，成功后隐藏加载器

// $.ajax(){ }

setTimeout(function(){

$(".m-content").append(html);

$(".js-load-more").hide();

},2000);

}

});

//下拉刷新

首先顶部放一个DIV 放着刷新的层，然后设置其height为0，JS代码为：

//记录手指初始位置，用来判断是向上还是向下

var begin='';

$(".content").on("touchstart",function(e){

//记录手指初始位置

begin=e.touches[0].clientY;

});

//判断向上时，如果滚动条在顶部，那么逐渐增加下拉刷新的高度

//前一次手指位置

var isFalse='';

$(".content").on("touchmove",function(e){

isFalse=false;

//记录滚动条位移

var scrollTop=$(window).scrollTop();

var clientY=e.touches[0].clientY;

var aa=clientY-begin;

if(aa<0){

return;

}else{

if(scrollTop==0){

//当手指移动高度过高时，定死，并且可以触发刷新事件

if(aa>50){

aa=50;

isFalse=true;

}

$(".xiala").css("height",aa);

}

}

});

//下拉刷新高度达到一定值之后刷新页面

$(".content").on("touchend",function(e){

//执行刷新操作

if(isFalse){

$.toast("刷新");

$(".xiala").css("height","0");

isFalse=false;

}

});