* mescroll请参考官方文档

1. 使用mescroll实现下拉滑动的效果: (仅仅效果, 有的页面不需要刷新数据, 只要你能下拉就行)

代码如下:

var mescroll = new MeScroll('mescroll', {

                up: {
use: false // 不配置上拉
},
down: {
auto: false,
htmlContent: ' ', // 下拉内容设为空
callback: function(ms) {
console.log('down');
ms.endByPage(, ); // mescroll.endError() 效果一样//回掉为空, 结束页为空
}
} });

2. 案列2: 使用上拉刷新功能, 下拉只提供效果

            var mescroll = new MeScroll('mescroll', {

				up: {
noMoreSize: 1,
htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>',
htmlNodata: '<p class="upwarp-nodata">-- 没有数据啦 --</p>',
callback: function(page, ms) { console.log('up');
                             // 业务代码部分
$scope.search($scope.condition, ms);
}
},
down: {
auto: false,
htmlContent: ' ',
callback: function(ms) {
console.log('down');
mescroll.endErr(); // 使用endError把下拉的效果关闭(内容回到原位), mescroll内部会自动恢复原来的页码,时间等变量
}
} });

  3.  使用上拉加载, 下拉重置刷新的功能:

        var mescroll = new MeScroll('mescroll', {
up: {// 只需要配置上拉刷新部分, mescrol会默认开启下拉刷新,并重置当前页为第一页,然后调用up.callback()
noMoreSize: 1,
htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>',
htmlNodata: '<p class="upwarp-nodata">-- 没有数据啦 --</p>',
page: { // 要使用它提供的分页参数, 把分页功能托管给他
num : 0,
size : $scope.pageInfos.size,
time: null
},
callback: function(page, ms) { // 获取回掉里的分页和mescroll实例
$scope.loadUncommitIssues(page, ms); // 传递分页对象和mescroll实例,进行业务代码操作
}
}
});

  

使用mescroll来实现移动端页面上拉刷新, 下拉加载更多功能的更多相关文章

  1. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  2. Flutter学习笔记(25)--ListView实现上拉刷新下拉加载

    如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...

  3. 微信小程序 上拉刷新/下拉加载

    小程序项目中上拉刷新下拉加载是比较常见的需求,官方文档也提供了相当友好的API,但是因为API隐藏的比较深,文档描述也比较模糊所以也折腾了一番(官方文档),在此记录一下使用方式 onPullDownR ...

  4. Android 上拉加载更多功能

    前几天看了github上面的例子,参照它的实现,自己又稍微改了一点,往项目里面增加了一个上拉加载更多功能.具体的实现如下: 首先要重写ListView: import android.content. ...

  5. jQuery模拟原生态App上拉刷新下拉加载

    jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...

  6. ListView上拉刷新和分页加载完整的Dome

    很多人工作的过程中都会碰到ListView下拉刷新和分页加载,然后大多数公司都已经把框架写好了,大家直接用就可以了,有些人一直对这个事情处于迷茫状态,为了让大家对上拉刷新和分页加载有一个比较全面的认识 ...

  7. Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载

    随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的 ...

  8. 移动端web页面上滑加载更多功能

    背景介绍: 开发企业微信的一个应用,实现在企业微信中调用自己程序页面,页面加载多模块数据,向下滑加载更多,等等等等,一波三折 然后很早就成功了是这样实现的: html: <div id=&quo ...

  9. 分页插件思想:pc加载更多功能和移动端下拉刷新加载数据

    感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...

  10. 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 (制作csdn app 四)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/23698511 今天继续对我们的csdn客户端未完成的功能进行实现,本篇博客接着客 ...

随机推荐

  1. ubuntu配置

    首先就是Ubuntu的更新源问题,需要更改,否则更新不了. 其次就是Securecrt的远程登陆问题,windows主机和ubuntu虚拟机如果能通信,要求在同一网段上,而ubuntu是动态加载,需要 ...

  2. 学web前端开发有前途吗

    web前端开发现在如此火爆,可以说是引领了IT培训行业的一个潮流,那么web前端开发都要学些什么知识呢?为什么这么火有前途吗?现在行业很需要这种人才吗?还是大家盲目跟风,随大流,下面小编对web前端做 ...

  3. 【其他】Objective-C 内存管理学习总结

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/OC_CG.html 最近学习了Objective-C语言(以下简称OC),其他的都还好,唯有它的内存管理让我不知所 ...

  4. uclibc和glibc的差别

    uClibc和Glibc并不相同,两者有许多不同之处,而且以下不同有可能给你带来一些问题. 1. uClibc比Glibc小,虽然uClibc和Glibc在已有的接口上是兼容的,而且采用uClibc编 ...

  5. IP地址 A\B\C类

    互联网协议地址(英语:Internet Protocol Address,又译为网际协议地址),缩写为IP地址(IP Address),在Internet上,一种给主机编址的方式.常见的IP地址,分为 ...

  6. (二十九)java条件控制语句培训笔记

    java结构控制语句示例:if,if else,switch case 定义三个变量: :在这个例子中,if并列,则每一次都会进行判断,条件为true则输出里边的内容 ,因此,这里会输出one和fou ...

  7. JavaScript控制输入框中只能输入中文、数字和英文

    1.问题背景 遇到这样一个问题:有一个输入框,要求只能输入中文.数字和英文(即过滤特殊字符串) 2.JS代码 function  checkUsername() { //正则表达式 var reg = ...

  8. Flex下拉框

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  9. .Net 4.X 提前用上 .Net Core 的配置模式以及热重载配置

    1. 前言 在提倡微服务及 Serverless 越来越普及的当下,在 .Net Core 之前,.Net 应用的配置模式往往依赖于一个名为 web.config 的 XML 文件,耦合性高,而可扩展 ...

  10. PHP 数组模糊查询

    function search() { $a=array( '0' => array('id'=>1,'pid'=>0,'name'=>'水果'), '1' => arr ...