移动端上拉加载下拉刷新插件-mescroll.js插件

官网地址是：http://www.mescroll.com

下载mescroll.js插件。

在页面中引入如下两个文件：

　　mescroll.min.css

　　mescroll.min.js

html部分代码

    <div class="container"><div id="mescroll" class="my-address mescroll"><div id="addressList" class="address-list"><!-- 这里是ajax返结果list --></div></div></div>

需要注意的地方是页面的container必须有固定高度，否则上拉无效。

    var pageNum = 1; //页码var size = 10;  //每页数据固定条数//创建MeScroll对象var mescroll = new MeScroll("mescroll", {down: {isLock  // 锁定下拉功能
           //callback: upCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },up: {callback: upCallback //上拉加载的回调
            ,empty: {//列表第一页无任何数据时,显示的空提示布局; 需配置warpId或clearEmptyId才生效;warpId:'mescroll', //父布局的id; 如果此项有值,将不使用clearEmptyId的值;icon: null, //图标,默认nulltip: "暂无相关数据~", //提示btntext: "", //按钮,默认""btnClick: null, //点击按钮的回调,默认null
            },}});//下拉刷新的回调function downCallback() {}//上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10function upCallback(page) {$.ajax({url: '/screen/pickUpPoint/findPickUpPointList?current='+pageNum+'&pageSize='+size,dataType:'json',type:'GET',success: function(json) {console.log(json)var data = json.data;var _html = $('#addressListTmpl').render(data);$('#addressList').append(_html);mescroll.endByPage(data.records.length, data.totalPage);pageNum++},error: function(e) {//联网失败的回调,隐藏下拉刷新和上拉加载的状态
                mescroll.endErr();}});}

大概就是这么个流程，具体详细的还需看官方文档给出的，这里只是做一个简单的效果！

转载于:https://www.cnblogs.com/duanyue/p/8031754.html

移动端上拉加载下拉刷新插件-mescroll.js插件相关推荐

教你如何使用SwipeRefreshLayout来构建一个上拉加载下拉刷新框架
前言: 基本上所以的移动端应用都有Listview(当然RecyclerView也一样),那必不可少的都会嵌入一个上拉加载下拉刷新的功能.这样能大大的减少用户的流量消耗,同样对于用户也有更好的用户体验 ...
php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
ionic上拉加载-下拉刷新
ionic上拉加载-下拉刷新 1.上拉加载 <ion-infinite-scroll on-infinite="loadOlderStories()" distance=&q ...
Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法...
bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件在使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore ...
php mescroll,mescroll.js上拉加载下拉刷新组件使用详解
本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码,供大家参考,具体内容如下使用注意事项: 1.引入的时候出问题及时看官方给出的解决方案(基本上都必须看): 2.react中一 ...
ios 上拉加载下拉刷新
在一款 App应用中有的时候会用到上拉加载下拉刷新的功能,本人觉得SVPullToRefresh很好用(可以用在UIScrollView上,包括UITableview和UICollectionView ...
微信公众号上拉加载下拉刷新
最近再再做一个公众号的项目有需要用到上拉加载,下拉刷新的技术.在网上找了很久,终于找到一个很好用 js 插件,今天我就把这个插件分享给大家,该包可用于App和微信公众号 , 资源下载地址:https: ...
h5结合vant框架，实现列表上拉加载下拉刷新
最近在做h5移动页面开发,并且需要用移动端android和ios将h5嵌进去.在开发过程中,使用了vant这个框架: vant文档:https://youzan.github.io/vant/#/zh ...
图片自动轮播+上拉加载下拉刷新+侧滑菜单+小圆点
//效果图如下 //添加权限 <uses-permission android:name="android.permission.INTERNET"></uses ...
上拉加载下拉刷新了解下
2019独角兽企业重金招聘Python工程师标准>>> 老样子,我们先,哦不,今天我们直接上思路,没有效果图,真的没有我们依旧从界面及逻辑两块进行分析 1.界面上,只分成简单的两块 ...

移动端上拉加载下拉刷新插件-mescroll.js插件

下载mescroll.js插件。

移动端上拉加载下拉刷新插件-mescroll.js插件相关推荐

最新文章

热门文章