h5移动端下拉刷新，上拉加载

---

一、下拉刷新

代码如下（示例）：

var servepage = 1;//当前页数
var totalpage = 0;//总页数  需要自行查询赋值
var isload = false;
var pageY = null, endY = null;
dropDownLoad()
$(window).scroll(function () {
    if (!document.documentElement.scrollTop) {
        dropDownLoad()
    }
})

function dropDownLoad() {
    // 要下拉的元素
    $('#my_target').on({
        // 触摸事件
        touchstart: function (e) {
            // 获取当前触摸位置
            pageY = e.originalEvent.targetTouches[0].pageY;
            $(this)[0].style.position = 'relative';
            $(this)[0].style.transition = 'transform 0s';
        }
    });
    // 手指滑动事件
    $('#my_target').on({
        touchmove: function (e) {
            // 获取离开位置
            endY = e.originalEvent.targetTouches[0].pageY - pageY;
            endY = endY > 200 ? 200 : endY;
            $(this)[0].style.transform = 'translateY(' + endY + 'px)';
            if (!isload && endY < 80) {
                //加载数据
                isload=true;//防止ajax一直发送请求
                servepage=1;//把当前页数变为1
                getData(servepage);
            }
        }
    });
    // 手指离开事件
    $('#my_target').on({
        touchend: function (e) {
            $(this)[0].style.transition = 'transform 0.5s ease';
            $(this)[0].style.transform = 'translateY(0px)';
        }
    });
}
function getData(servepage){
	//请求地址
    var url="xxxx.do?xxxxx&page="+servepage;
    $.ajax({
        type: 'post',
        async: true,
        url:url,
        data: null,
        dataType: 'json',
        success: function (data) {
        	if(data.success){
        		//业务逻辑
        		console.log("hello,world");
        	}
        	isload=false;
            $("#my_target")[0].style.transition = 'transform 0.5s ease';
            $("#my_target")[0].style.transform = 'translateY(0px)';
        }
    })
}

二、上拉加载

代码如下（示例）：

var servepage = 1;//当前页数
var totalpage = 0;//总页数  需要赋值
var isload = false;
$("#my_target").scroll(function() {
    var allh = $('body').height();
    var w = $("#my_target").height();
    var s_scroll = w-allh;
    //服务列表
    if ($("#my_target").scrollTop() > s_scroll && !isload) {
        servepage++;
        isload = true;
        if(servepage <= totalpage){
        	//加载数据
            getData(servepage);
        }
    };
});
function getData(servepage){
	//请求地址
    var url="xxxx.do?xxxxx&page="+servepage;
    $.ajax({
        type: 'post',
        async: true,
        url:url,
        data: null,
        dataType: 'json',
        success: function (data) {
        	if(data.success){
        		var obj=data.obj;
        		//数据总页数赋值
                totalpage=parseInt(data.attributes.count/3);
                var yeshuyu=data.attributes.count%3;
                if(yeshuyu>0){
                    totalpage++;
                }
                var div=$("#my_target");
                if(yeshu==1){
                	//页数为1时清空数据
                    div.empty();
                }
        		console.log("hello,world");
        	}
        	isload=false;
        }
    })
}