使用mescroll实现上拉加载与下拉刷新

时间:2024-02-15 19:13:01

  现在上拉加载与下拉刷新几乎已经是移动端必备功能之一了,自己实现一个太麻烦,但是好用的插件又非常少。之前看到网上很多人都在用iScroll,于是也尝试用它做了几个DEMO,但或多或少都有一些问题,比如这个插件缺少暂停/恢复滚动的功能,数据不满一页时上拉有问题,等等。官方也没有提供相应的例子,加上配置项非常多,作者也不维护了,最后只好放弃研究。后来偶然发现了mescroll这个框架,并且官网提供的例子非常丰富,比较符合国内移动端的开发需求,于是打算尝试一下。

  虽然官网的例子down下来是可以运行的,但并非真实数据,在切换到真实数据源后,也出现了各种各样的问题,这里记录一下遇到的问题和解决方案。首先是HTML结构:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mescroll下拉刷新与上拉加载更多</title>
    <!--mescroll.min.css为mescroll的样式文件,必须引用-->
    <link rel="stylesheet" href="css/mescroll.min.css">
    <!--scroll.css为自定义样式,非必须-->
    <link rel="stylesheet" href="scroll.css">
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <!--mescroll.min.js为mescroll的脚本文件,必须引用-->
    <script src="js/mescroll.min.js"></script>
    <!--scroll.js为自定义脚本,非必须-->
    <script src="scroll.js"></script>
</head>
<body>
    <header>Header</header>
    <!--mescroll这个样式是框架的硬性要求,不能删,但可以在样式表中覆盖-->
    <div id="is-0" class="mescroll">
        <ul class="dataList" id="dataList"></ul>
    </div>
    <footer>Footer</footer>
</body>
</html>

结构比较简单,一个header一个footer外加中间一个滚动容器。接下来是scroll.css里的样式编写:

/* 头尾的样式,采用fixed布局,不重要 */
header,
footer {
  height: 50px;
  text-align: center;
  line-height: 50px;
  text-shadow: black 0.1em 0.1em 0.2em;
  color: #ffffff;
  left: 0;
  width: 100%;
  position: fixed;
  background: #4bbaf2;
  background: -moz-linear-gradient(top, #4bbaf2 0%, #4bbaf2 52%, #2d80e5 100%);
  background: -webkit-linear-gradient(top, #4bbaf2 0%, #4bbaf2 52%, #2d80e5 100%);
  background: linear-gradient(to bottom, #4bbaf2 0%, #4bbaf2 52%, #2d80e5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#4bbaf2\', endColorstr=\'#2d80e5\', GradientType=0);
}
header {
  top: 0;
}
footer {
  bottom: 0;
}
/* end */


/*********** 滚动容器的样式start (重点关注这一部分) ***********/
.mescroll {
  position: fixed;
  top: 50px;
  bottom: 50px;
  left: 0;
  height: auto; /*mescroll.min.css中使用了height:100%,与现有布局冲突,所以这里通过height:auto覆盖掉*/
  background: #f6f6f6;
}
/*滚动列表的样式*/
.mescroll .dataList {
  min-height: 100%;  /*通过设置最小高度,可以把上拉加载的提示撑到底部,不然没有数据或数据较少时会在页面显示出来,不美观*/
}

/*数据为空时显示的图标及文案,垂直居中*/
.mescroll .dataList .mescroll-empty {
  padding-top: 0;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
/*********** 滚动容器的样式end ***********/


/* li及里面内容的样式,按照自己需求定制即可,不重要 */
.mescroll .dataList li {
  padding: 10px;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  word-break: break-all;
}
.mescroll .dataList li h3 {
  font-size: 14px;
}
.mescroll .dataList li p {
  font-size: 12px;
  margin-top: 5px;
  color: #666;
}

最终得到的效果页面如下:

 

分页测试数据的准备

  页面结构已经搭好了,现在还差能够测试的数据。测试数据最好不依赖数据库和复杂的服务器环境,折腾起来太麻烦。这里推荐一个基于node.js的第三方工具 json-server ,可以模拟分页数据。安装成功后,在任一目录下新建一个db.json文件,并写入一些测试数据,

{
  "posts": [
    {
      "userId": 1,
      "id": 1,
      "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
      "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
    },
    {
      "userId": 1,
      "id": 2,
      "title": "qui est esse",
      "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
    },
    {
      "userId": 1,
      "id": 3,
      "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
      "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
    }]
}

然后在当前目录打开命令行,执行 json-server db.json --watch 然后会得到一个链接, http://localhost:3000/posts ,访问这个链接就能得到测试数据了。现在来试试分页,按照文档中的配置在url中输入http://localhost:3000/posts?_limit=10&_page=1 发现已经可以取到分页数据了。最后就是初始化mescroll:

var mescroll = new MeScroll("is-0", {
        up: {
            callback: upCallback, //上拉加载的回调
            isBounce: false, //如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,建议配置此项
            auto: true,
            htmlNodata: \'<span style="font-size:12px">没有更多数据了</span>\',
            toTop: {
                src: \'这里放返回顶部的图片路径\',
                offset: 80
            },
            empty: {//数据为空
                warpId:\'dataList\', //对应ul元素的id
                icon: \'这里放数据为空时展示的图片路径\',
                tip: "暂无相关数据~",
                btntext: "",
                btnClick: null,
                supportTap: false
            }
        }
});

由于下拉刷新mescroll在内部已经配置好了,所以没有特殊需求就不用再次配置,最后看看upCallback回调,这个方法处理上拉加载:

function upCallback(page) {
    page.size = 10; //每页显示的数据条数,mescroll内置默认为10

    var data = {_limit: page.size, _page: page.num};    //page.num由mescroll内部控制,从1开始,不用做特殊处理,如果想从0开始

    $.get(\'http://localhost:3000/comments\', data, function (data) {
        var container = $(\'#is-0\');
        var content = \'\';
        var len = data.length;  //保存此次请求获取到的数据个数,endBySize要用到这个变量

        $.each(data, function (index, item) {
            content += `<li><h3>${item.title}</h3><p>${item.body}</p></li>`;
        });

        var listBox = container.find(\'ul\').eq(0);
        //如果请求为第一页,清空列表后再往里填充数据,是针对下拉刷新的处理
        if (page.num === 1) listBox.empty();

        listBox.append(content);

        mescroll.endBySize(len, total); //total为数据总量,由接口返回。测试数据中没有提供是因为接口不支持。
    });
}

 最后的效果如下:

     

 

完整代码