移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 —— 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
移动端下拉刷新上拉加载-mescroll.js插件的更多相关文章
- Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
- SwipeRefreshLayout实现下拉刷新上滑加载
1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- MaterialRefreshLayout+ListView 下拉刷新 上拉加载
效果图是这样的,有入侵式的,非入侵式的,带波浪效果的......就那几个属性,都给出来了,自己去试就行. 下拉刷新 上拉加载 关于下拉刷新-上拉加载的效果,有许许多多的实现方式,百度了一下竟然有几十种 ...
- mui下拉刷新上拉加载
新外卖商家端主页订单大厅页面 使用mui双webview,实现下拉刷新上拉加载 主页面: order_index.html <!doctype html> <html> < ...
- 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载
title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...
- ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多
ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...
随机推荐
- 【分享】纯jQuery实现星巴克官网导航栏效果
前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...
- Unity3D高性能战争迷雾实现
效果图 先上效果图吧,这是为了吸引到你们的ヽ(｡◕‿◕｡)ﾉﾟ 战争迷雾效果演示图 战争调试界面演示图 由于是gif录制,为了压缩图片,帧率有点低,实际运行时,参数调整好是不会像这样一卡一顿的. 战争 ...
- linux使用yum安装mariadb
一,安装 yum install mariadb mariadb-server 二,如何设置密码 用root 进入mysql后 mysql>set password =password('你的 ...
- CTF线下攻防赛
SSH登陆 两三个人进行分工,一个粗略的看下web,有登陆口的话,就需要修改密码,将情况反馈给队友,让登陆ssh的小伙伴进行密码的修改,改成炒鸡复杂.然后将Web目录下载下来,上WAF.文件监控.端口 ...
- CSS常见布局解决方案
最近要准备移动端项目,大半年没好好写过CSS了,今天恶补了一下CSS的一些布局,下面做一些分享. 水平居中布局 1.margin + 定宽 <div class="parent&quo ...
- CentOS6.x机器安装Python2.7.x
准备环境:CentOS6.9机器 1.查看机器默认的Python版本 [root@hlmcent69nma ~]# python -V Python [root@hlmcent69nma ~]# wh ...
- Spring Cloud Eureka Server集群Demo级搭建
将上篇随笔Spring Cloud Eureka服务Demo级搭建进行改造,改造成一个在本机的伪集群 1.修改hosts文件(windows10 hosts文件位置:C:\Windows\System ...
- PhpStorm2017版激活方法、汉化方法以及界面配置
PhpStorm激活和汉化文件下载网址:http://pan.baidu.com/s/1nuHF1St(提取密码:62cg) PHPMailer的介绍 PhpStorm是一个轻量级且便捷的PHP ID ...
- 学习用java基于webMagic+selenium+phantomjs实现爬虫Demo爬取淘宝搜索页面
由于业务需要,老大要我研究一下爬虫. 团队的技术栈以java为主,并且我的主语言是Java,研究时间不到一周.基于以上原因固放弃python,选择java为语言来进行开发.等之后有时间再尝试pytho ...
- SQL图像查看器 —— SQL Image Viewer
有时候往数据库里面存储了一些图片,但是如果不写读取程序的话,就不知道存储的对不对. 或者查看SQL数据库里面二进制看不懂,这个看图片很直观的. 就需要SQL Image Viewer这么一个