iscroll应用:下拉加载核心代码

作者: 子心_ | 来源:发表于2019-07-09 10:07 被阅读0次

iscroll应用:下拉加载核心代码
上拉加载，下拉刷新
ionic4 入门 (五) 上拉加载下拉刷新
iscroll5实现上拉加载更多，下拉刷新
iScroll 实例：下拉刷新，上拉加载
iscroll 4 上拉加载下拉刷新
iscroll5.0的使用
Layui如何动态加载下拉框
PDF阅读器-系统分享 2018-07-12
uniapp 前端分页操作

iscroll应用 --> 下拉加载核心代码

    <script>
        window.onload=function (){
        let scroll=new IScroll('.parent', {
            disableMouse: true,
            disableTouch: false,
            disablePointer: true,
            scrollY:    true,
            probeType:  3
        });

        let oDropDown=document.getElementsByClassName('dropdown')[0];
        let oLoadMore=document.getElementsByClassName('loadmore')[0];
        let oParent=document.getElementsByClassName('parent')[0];
        let oChild=document.getElementsByClassName('child')[0];

        scroll.on('scroll', function (){
            if(scroll.y>=50){
            oDropDown.innerHTML='松手刷新';
            }else{
            oDropDown.innerHTML='下拉刷新';
            }

            if(-scroll.y-(oChild.offsetHeight-oParent.offsetHeight)>=50){
            oLoadMore.innerHTML='松手加载';
            }else{
            oLoadMore.innerHTML='加载更多';
            }
        });

        oParent.addEventListener('touchend', function (){
            if(scroll.y>=50){
            scroll.disable();
            oChild.style.transition='0.6s all ease';
            oChild.style.transform=`translateY(${oDropDown.offsetHeight}px)`;

            oDropDown.innerHTML='<img height="20" src="loading.gif" />加载中...';
            $.ajax({
                url: '1.txt',
                success(txt){
                setTimeout(function (){
                    oChild.innerHTML=txt;

                    oChild.style.transform='translateY(0)';

                    function fnEnd(){
                    oChild.style.transition='none';
                    oChild.removeEventListener('transitionend', fnEnd, false);

                    scroll.y=0;
                    scroll.enable();
                    }
                    oChild.addEventListener('transitionend', fnEnd, false);

                    oDropDown.innerHTML='';
                }, 3000);
                },
                error(err){
                alert('加载失败');
                }
            });
            }

            //scroll.scrollTo(0, oDropDown.offsetHeight, scroll.options.bounceTime);//另一种方法
        }, false);
        };
    </script>

    <style media="screen">
        .parent {width:300px; height:400px; border:1px solid black; margin:50px auto 0; overflow:hidden; position:relative;}
        .parent .child {width:300px; background:#FFF; position:relative; z-index: 999; overflow:hidden;}
        .parent .dropdown {position:absolute; left: 0; top: 0; width:100%; text-align:center; line-height: 40px;}
        .parent .loadmore {position:absolute; left: 0; bottom: 0; width:100%; text-align:center; line-height: 40px;}
    </style>
    <body>
    <div class="parent">
      <div class="child">
        <p>2018年3月8日，鲁检君跟随山东省人民检察院公诉二处检察官程才和汤宁，前往“德州大学生遇害案”二审上诉庭审的现场，为您还原案件真相，揭秘背后的故事。</p>
        <p>案发</p>
      </div>
      <div class="dropdown">下拉刷新</div>
      <div class="loadmore">加载更多</div>
    </div>
    </body>