移动端下滑加载js

最新推荐文章于 2022-02-09 16:20:56 发布

左左在右边

最新推荐文章于 2022-02-09 16:20:56 发布

阅读量242

点赞数

分类专栏： JS进阶-中高级编程随笔代码

本文链接：https://blog.csdn.net/weixin_41609327/article/details/107975403

版权

随笔代码同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

JS进阶-中高级编程

9 篇文章 1 订阅

订阅专栏

1,iscroll 网上接入的太麻烦了，各种问题，只好手动写一个了，

2,利于touchend.touchmove.touchstart三个事件，判断div可滚动就滚动，不可滚动时判断触摸手是向上滑动就加载。

可滚动和不滚动的依据是最后一个元素是否出现在了窗口上。

3，scollBind是核心代码，其他的是我的个人分页业务。

代码：


var iscroll = {
    pageData: {
        rows: 6,
        page: 1,
        sidx: "",//排序列
        sord: "",//排序类型
    },
    callback: null,
    searchLog: "",
    loadQ: "",
    query: {},
    lock:true,
  
    init: function () {
        this.ajaxData();
        this.scollBind();
        //上拉加载
       

    },
    scollBind: function () {
        var that = this;
        var startX, startY, moveEndX, moveEndY;
        var isMoving = false;
       
        $(that.loadQ).on("touchstart","li", function (e) {
            if (status !== '11' && this.direction === 'vertical' && !(parseInt(status, 2) & parseInt(direction, 2)) && e.cancelable) {
                e.preventDefault();
                e.stopPropagation();
            }
            isMoving = false;
            startX = e.originalEvent.changedTouches[0].pageX;

            startY = e.originalEvent.changedTouches[0].pageY;


        });

        $(that.loadQ).on("touchend", "li", function (e) {




            if (status !== '11' && this.direction === 'vertical' && !(parseInt(status, 2) & parseInt(direction, 2)) && e.cancelable) {
                e.preventDefault();
                e.stopPropagation();
            }
            if(isMoving) {
                return;//滚动的时候不要刷新
            }

            moveEndX = e.originalEvent.changedTouches[0].pageX;

            moveEndY = e.originalEvent.changedTouches[0].pageY;

            Y = moveEndY - startY;
            console.log(Y);
            if (Y < -1) {
                that.pageData.page++;
                that.ajaxData();
                
            }

        });

        $(that.loadQ).on("touchmove","li", function (e) {
            if (status !== '11' && this.direction === 'vertical' && !(parseInt(status, 2) & parseInt(direction, 2)) && e.cancelable) {
                e.preventDefault();
                e.stopPropagation();
            }
            moveEndX = e.originalEvent.changedTouches[0].pageX;

            moveEndY = e.originalEvent.changedTouches[0].pageY;

            Y = moveEndY - startY;
            var a = $(that.loadQ).find("li").last()[0].offsetTop;
          //最后一个出现了，就别滚动了，该加载了
            if (a >= $(window).scrollTop() && a < ($(window).scrollTop() + $(window).height())) {
                isMoving = false;

            } else {
                isMoving = true;
            }
                
          
           

        });
        
    },

   
    ajaxData: function () {

        var that = this;

        $.ajaxSettings.async = false;

        if (that.lock) {
            that.lock = false;
            $.get($(that.loadQ).attr("pageUrl"), { pageData: JSON.stringify(that.pageData), query: JSON.stringify(that.query), searchLog: that.searchLog }, function (json) {
                if (json) {
                    //  $(that.loadQ).html("");
                    $(that.loadQ).append(json);
                }

                if (that.callback) {
                    that.callback();
                }
            });
            that.lock = true;
        }
        $.ajaxSettings.async = true;
    },
    refresh: function () {

        this.pageData.page = 1;
        $(this.loadQ).html("");
        this.ajaxData();
    }
}