最近无意间看到有这么一个上拉刷新下拉加载的插件 —— mescroll.js，个人感觉挺好用的，官网地址是：http://www.mescroll.com
然后我就看了一下文档，简单的写了一个小demo记录下来，因为没有过多需要解释说明的，所以直接贴出代码。
1、下载mescroll.js插件。
在页面中引入如下两个文件：
mescroll.min.css
mescroll.min.js
2、代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mescroll-下拉刷新上滑加载</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="lib/mescroll.min.css"> <script src="lib/mescroll.min.js"></script> <script src="lib/zepto.min.js"></script> <style> *{ margin: 0; padding: 0; } .clearfix::before, .clearfix::after{ content: ''; display: block; height: 0; visibility: hidden; clear: both; } .fl { position: absolute; top: 10px; left: 0; right: 120px; } .fr { float: right; } .top { position: fixed; top: 0; left: 0; width: 100%; height: 30px; line-height: 30px; z-index: 9999; background-color: #ddd; padding-left: 10px; } .layout { width: 100%; height: 100%; padding-top: 50px; } .layout .content { padding: 10px; } .layout .content li { border-top: 1px solid #ddd; padding: 10px 0; position: relative; } .layout .content li:first-child { border-top: 0 none; } .layout .content li .title { height: 20px; line-height: 20px; font-size: 16px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all; } .layout .content li .summary { margin-top:6px; height: 44px; line-height: 22px; font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; } .layout .content li .img img { float: right; width: 110px; } .mescroll .upwarp-nodata { padding-bottom: 30px; } </style> </head> <body> <div class="top"> 新闻列表 </div> <div class="layout"> <div id="mescroll" class="mescroll"> <div class="mescroll-bounce"> <ul id="content" class="content"> </ul> </div> </div> </div> <script> var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id //如果下拉刷新是重置列表数据,那么down完全可以不用配置 down: { callback: downCallback //下拉刷新的回调 }, up: { htmlNodata: '<p class="upwarp-nodata">没有更多了..</p>', page: { num: 0, size: 10, time: null }, callback: upCallback //上拉加载的回调 } }); var pageSize = 10; function downCallback(page) { $.ajax({ url: 'http://172.16.5.102:8081/ssm_project/news/newsList.do?status=1&pageSize='+pageSize+'&pageIndex=1', type: 'get', data:{}, success: function (res) { $('#content').html(''); mescroll.resetUpScroll(); }, error: function () { // 联网失败的回调,隐藏下拉刷新的状态 mescroll.endErr(); } }) } function upCallback(page) { $.ajax({ url: 'http://172.16.5.102:8081/ssm_project/news/newsList.do?status=1&pageSize='+page.size+'&pageIndex='+page.num, type: 'get', data:{}, success: function (res) { var list = res.data; var html = ''; if(res.success == 1 && list.length > 0){ //有数据 list.forEach(function (item) { html += `<li class="clearfix"> <div class="fl"> <h4 class="title">${item.title}</h4> <p class="summary">${item.summary}</p> </div> <div class="fr img"> <img src="${item.titleImg}"> </div> </li>` }) } $('#content').append(html); if(res.data && res.data.length == page.size) { //联网成功的回调,隐藏下拉刷新的状态（参数：当前页的数据个数, 是否有下一页true/false）; mescroll.endSuccess(res.data.length, true); }else{ //联网成功的回调,隐藏下拉刷新的状态（参数：当前页的数据个数, 是否有下一页true/false）; mescroll.endSuccess(res.data.length, false); } }, error: function () { // 联网失败的回调,隐藏下拉刷新的状态 mescroll.endErr(); } }) } </script> </body> </html>
3、效果
需要购买阿里云产品和服务的，点击此链接领取优惠券红包，优惠购买哦，领取后一个月内有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07