基于zepto写的几个常用小东西（toast、加载器、上拉加载、下拉刷新）
基于zepto的自定义toast、load加载效果
//显示一个消息，会在2秒钟后自动消失
//toast参数可选，三种是文字、时间、以及class的类
$.toast = function(msg, duration, extraclass) {
var $toast = $('
' + msg + '
').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= $('
' + '
'+'
').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='
22222222222222222222222222
22222222222222222222222222
22222222222222222222222222
22222222222222222222222222
';
//请求数据，然后添加内容，成功后隐藏加载器
// $.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;
}
});