* 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. H3C三层交换机配置IP

    1.直接在物理端口上设置IP地址. int f1/0/1 port link-mode route #链路模式采用路由 ip add 192.168.10.1 24 ospf network0type ...

  2. hive: insert数据时Error during job, obtaining debugging information 以及beyond physical memory limits

    insert overwrite table canal_amt1...... 2014-10-09 10:40:27,368 Stage-1 map = 100%, reduce = 32%, Cu ...

  3. linux 集群及lvs

    集群及LVS 集群: 一组通过高速网络互联的计算机组,并以单一系统的模式加以管理 价格很多服务器集中起来,提供同一种服务,在客户端看起来就像只有一个服务器 可以在付出较低成本的情况下获得在性能,可靠性 ...

  4. R语言︱数据集分组、筛选(plit – apply – combine模式、dplyr、data.table)

    R语言︱数据集分组 大型数据集通常是高度结构化的,结构使得我们可以按不同的方式分组,有时候我们需要关注单个组的数据片断,有时需要聚合不同组内的信息,并相互比较. 一.日期分组 1.关于时间的包都有很多 ...

  5. Count:2org.apache.batik.transcoder.TranscoderException: null

    1.错误描述 Count:2org.apache.batik.transcoder.TranscoderException: null Enclosed Exception: The current ...

  6. 芝麻HTTP:pyspider的安装

    pyspider是国人binux编写的强大的网络爬虫框架,它带有强大的WebUI.脚本编辑器.任务监控器.项目管理器以及结果处理器,同时支持多种数据库后端.多种消息队列,另外还支持JavaScript ...

  7. Django学习-4-request获取数据

    app下views.py             获取前端HTML数据的一些方法             def func(request):                 # request.me ...

  8. C#简单工厂和抽象类的实例

    using System; using System.Collections.Generic; using System.Diagnostics; using System.IO; using Sys ...

  9. 游戏中实现粒子碰撞,纯java

    package com.totoo.TouhouMassLight;import android.content.Context;import android.graphics.Bitmap;impo ...

  10. 【SPOJ】Distinct Substrings/New Distinct Substrings(后缀数组)

    [SPOJ]Distinct Substrings/New Distinct Substrings(后缀数组) 题面 Vjudge1 Vjudge2 题解 要求的是串的不同的子串个数 两道一模一样的题 ...