H5——移动端JQ实现下拉刷新、上拉加载更多

前言

这里用的JQ库里免费插件__dropload，效果图在文末

引入

去上面链接里面下载内容,可以本地引入

<link rel="stylesheet" href="../dist/dropload.css">
<script src="../dist/dropload.min.js"></script>

最好就放在自己cdn服务器上引入

代码

html这边就,

<div  class="main"      //插件绑定这层
	<div class="imglist   //这层用于渲染列表数据

js :

let me = $('.main').dropload({
        domDown:{
            domClass : 'dropload-down',
            domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
            domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
            domNoData : '<div class="dropload-noData">暂无数据</div>',
        },
        domUp:{
            domClass : 'dropload-up',
            domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
            domUpdate  : '<div class="dropload-update">↑释放更新</div>',
            domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
        },
        // distance  	拉动距离		默认50
        // threshold:	提前加载距离	默认加载区高度2/3
        autoLoad:false,  //是否自动加载，
        //上啦加载更多
        loadDownFn : function(me){
            //模拟请求，载入数据
            setTimeout(() => {
                let b = '<div class="list"> <img src="https://xxxxx/m/active/land5/miaoBest_6.png"  style="height:150px;width:100%"> <p>这是什么鬼啊</p> </div> ';
                $('.imglist').append(b);
                // 每次数据加载完，必须重置、即使加载出错
                me.resetload();
            }, 2000);
        },
        //下拉刷新
        loadUpFn: function(me){
            setTimeout(() => {
                console.log('下拉执行了');
                if(没数据了) {
					me.noData(true) //出现底线文字
					me.lock('down')  //锁定下方。上方是up
				}
                me.resetload();
            }, 2000);
			
			
			me.resetload();
        },
    });

Dom结构

ps

1.记得给main 设置 overflow-y:srcoll 并且最小高度为667px
2.如果数据列表上面还有东西比如轮播图,那么轮播图和main是同级的,不要把轮播图放进main里面,不然下拉刷新字眼会出现在轮播图上面.
3.<span class="loading"></span>这段代码,作用是让加载中前面的icon动起来,文档的示例代码只是一个普通O字符,并不会动.

效果图