* 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. ehcache的基本使用及Spring整合

    1.ehcache:百度百科这样解释的,EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的CacheProvider.总的来说,他的出现就是减少对数据 ...

  2. Mac上使用selenium自动运行chrome

    一.用我们的老朋友pip把selenium装好 pip install selenium 二.用webdriver.Chrome启动Chrome浏览器 from selenium import web ...

  3. ul 和 ol 标签的相关设置

    初学者不喜欢 ul 标签的最重要一点莫过于其前面的黑点了,每次写个无序列表其前面总有一个黑点是个很讨厌的事,去掉黑点的话自然是要用到 list-style:none:这条css 属性设置了. p.p1 ...

  4. 在 React 中使用 JSX 的好处

    优点: 1.允许使用熟悉的语法来定义 HTML 元素树: 2.提供更加语义化且移动的标签: 3.程序结构更容易被直观化: 4.抽象了 React Element 的创建过程: 5.可以随时掌控 HTM ...

  5. 八爪鱼采集器︱爬取外网数据(twitter、facebook)

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 要想采集海外数据有两种方式:云采集+单机采集. ...

  6. FMECA分析

    FMECA是针对产品所有可能的故障,并根据对故障模式的分析,确定每种故障模式对产品工作的影响,找出单点故障,并按故障模式的严重度及其发生概率确定其危害性.所谓单点故障指的是引起产品故障的,且没有冗余或 ...

  7. VxWorks:添加自己组件到Tornado

    项目要求将cpci的驱动做成Tornado组件,尝试了一下! Folder FOLDER_CPCI {                    //上层组件设置  NAME  cpci componen ...

  8. 新工具︱微软Microsoft Visual Studio的R语言模块下载试用Ing...(尝鲜)

    笔者:前几天看到了以下的图片,着实一惊.作为R语言入门小菜鸟,还是觉得很好看,于是花了一点时间下载下来试用了一下,觉得还是挺高大上的. 就是英文不好是硬伤.下面贴给小白,我当时的下载步骤与遇见的问题. ...

  9. HighCharts中的Ajax请求的2D折线图

    HighCharts中的Ajax请求的2D折线图 设计源码: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  10. 错误代码: 1111 Invalid use of group function

    1.错误描述 1 queries executed, 0 success, 1 errors, 0 warnings 查询:update t_user_info t inner join t_pro_ ...