* 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. cronatab周期性任务

    要执行周期性任务,要保证服务运行.服务名为crond:service crond start ; systemctl start crond; 配置文件 /etc/crontab cron的日志文件 ...

  2. List,Set,Map

    1.Collection 和 Map 的区别 容器内每个为之所存储的元素个数不同.Collection类型者,每个位置只有一个元素.List,SetMap类型者,持有 key-value pair,像 ...

  3. java日期转化

    package com.kang.util; import java.text.ParseException; import java.text.SimpleDateFormat; import ja ...

  4. windows 下安装或者卸载memcache

    1.安装到系统服务中: 在doc中:执行此软件 memcached.exe -d install(如果提示错误,要找到cmd.exe用管理员身份打开) 2.卸载: 在doc中:执行此软件 memcac ...

  5. Linux 系统裁剪笔记 4 (内核配置选项及删改)

     CDROM filesystem support(CONFIG_ISO9660_FS)[Y/m/n/?]有标准光驱的系统应该选Y.Minix fs support(CONFIG_MINIX_FS)[ ...

  6. Jqurey 得到url参数 getUrlParam

    Jqurey 得到url参数 getUrlParam <script type="text/javascript"> (function ($) { //扩展方法获取u ...

  7. org.apache.jasper.JasperException

    1.错误描述 2014-7-13 17:20:50 org.apache.catalina.core.StandardWrapperValve invoke 严重: Servlet.service() ...

  8. web开发性能优化---数据库篇

    1. 查询出的数据量过大(可以采用多次查询,其他的方法降低数据量),尽量采取分页查询数据 2.锁或者死锁(这也是查询慢最常见的问题,是程序设计的缺陷) 3.返回了不必要的行和列 用OR的字句可以分解成 ...

  9. Duplicate entry '0' for key 'PRIMARY'的一种可能的解决办法

    在MySQL设计好数据库往往数据库中插入数据的时候, 因为主键ID默认是不赋值的,只给其他项目赋值了,相关的SQL代码是这样的 StringBuilder strSql = new StringBui ...

  10. 一个简单的freemark输入输出的案例(一)

    一. 创建FreeMarker模板文件user.ftl <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&qu ...