mescroll.js实现下拉更新上拉加载更多图片懒加载返回顶部效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：mescroll.js实现下拉更新上拉加载更多图片懒加载返回顶部效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <style>
        .mescroll {
          position: fixed;
          top: 44px;
          bottom: 0;
          height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
        }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/mescroll.1.4.1.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mescroll.1.4.1.js"></script>
</head>

<body>

    <div id="mescroll" class="mescroll">
        <!-- //id可以改,而"mescroll"的class不能删-->
        <div>
            <!--这个div不能删,否则上拉加载的布局会错位.(可以改成ul或者其他容器标签)-->
            <p><img imgurl="//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png" src="//repo.bfw.wiki/bfwrepo/icon/5f7abfbff367a.gif" /></p>
            <p><img imgurl="//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png" src="//repo.bfw.wiki/bfwrepo/icon/5f7abfbff367a.gif" /></p>
            <p><img imgurl="//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png" src="//repo.bfw.wiki/bfwrepo/icon/5f7abfbff367a.gif" /></p>
            <p><img imgurl="//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png" src="//repo.bfw.wiki/bfwrepo/icon/5f7abfbff367a.gif" /></p>
            <p><img imgurl="//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png" src="//repo.bfw.wiki/bfwrepo/icon/5f7abfbff367a.gif" /></p>
            <p><img imgurl="//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png" src="//repo.bfw.wiki/bfwrepo/icon/5f7abfbff367a.gif" /></p>
            <p><img imgurl="//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png" src="//repo.bfw.wiki/bfwrepo/icon/5f7abfbff367a.gif" /></p>
            <p><img imgurl="//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png" src="//repo.bfw.wiki/bfwrepo/icon/5f7abfbff367a.gif" /></p>
            <p><img imgurl="//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png" src="//repo.bfw.wiki/bfwrepo/icon/5f7abfbff367a.gif" /></p>
            <p><img imgurl="//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png" src="//repo.bfw.wiki/bfwrepo/icon/5f7abfbff367a.gif" /></p>
            <p><img imgurl="//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png" src="//repo.bfw.wiki/bfwrepo/icon/5f7abfbff367a.gif" /></p>
        </div>
    </div>


    <script>
        var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)
    	       		//如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
    	       		//解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
    				down: {
    					callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
    				},
    				up: {
    					callback: upCallback, //上拉加载的回调
    					//以下是一些常用的配置,当然不写也可以的.
    					page: {
    						num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
    						size: 10 //每页数据条数,默认10
    					},
    					htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
    					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
    							//避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
    							//这就是为什么无更多数据有时候不显示的原因.
    					toTop: {
    						//回到顶部按钮
    						src: "//repo.bfw.wiki/bfwrepo/icon/600047c5ba35c.png", //图片路径,默认null,支持网络图
    						offset: 1000 //列表滚动1000px才显示回到顶部按钮	
    					},
    					empty: {
    						//列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
    						warpId:	"xxid", //父布局的id (1.3.5版本支持传入dom元素)
    						icon: "//repo.bfw.wiki/bfwrepo/image/6.........完整代码请登录后点击上方下载按钮下载查看