* 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. 学生信息管理系统(c语言)

    ①注意: 程序中使用了sleep()函数.system()函数 关于 sleep() 函数 sleep() 函数的头文件和用法会因环境的不同而有所不同. 具体见-sleep()函数功能及用法 关于sy ...

  2. PHP开发丨3个简单的方法处理emoji表情

    一般Mysql表设计时,都是用UTF8字符集的.把带有emoji的昵称字段往里面insert一下就没了,整个字段变成了空字符串.这是怎么回事呢?原来是因为Mysql的utf8字符集是3字节的,而emo ...

  3. mysql打不开表问题解决方案

    做开发时候某一表怎么也打不开,数据也不多,网上查了按下面这篇文章完美解决,但是要记得用root登录mysql: 记一次MySQL中Waiting for table metadata lock的解决方 ...

  4. 关于C#委托的一些学习笔记

    1.什么是委托就是把方法作为参数传给另一个方法.委托说指向的函数,必须和函数具有相同的签名(返回值和参数类型) Public delegate void DelSayHi(string name); ...

  5. Linux命令top 详解

    top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.下面详细介绍它的使用方法. top - 01:06:48 up 1:22, 1 ...

  6. TP5 数组分页

    需要 use think\Page; 我这个是 Page是从tp3.2的移到5.0来用的,如果你的里面没有这个也可以移动过来 PHP代码: $page= $this->request->p ...

  7. 关于ThinkCMF自带插件上传不了图片的解决方法

    第一个原因:第一次安装的时候提示file_upload未打开,所以当上传的时候回上传失败 解决方法:在php.ini里打开file_uploads = On 第二个原因:一开始还可以上传,但是当删除了 ...

  8. C#隐式转换和显示转换举例--C#基础

    高精度的数据类型转换为低精度的数据类型是显示转换,低精度的转换为高精度的是隐式转换. 温馨提示:不能说强制类型转换是从低精度到高精度. int a=666;float b=(float)a: 由a到b ...

  9. JavaScript中的this的指代对象详解

    在javascript里面,this是一个特殊的对象,它不像其他编程语言那样,是存储在实例中的值,直接指向此实例. 而是作为一个单独的指针,在不同的情况之下,指向不同的位置,这也是为什么我们会将它搞混 ...

  10. flash数据交互

    新随笔 联系 订阅 管理 随笔 - 14  文章 - 5  评论 - 0 安卓中webview读取html,同时嵌入Flex的SWF,交互 安卓activity与html交互很简单,用javascri ...