php mescroll,mescroll下拉刷新和上拉加载js框架
插件描述:mescroll精致的下拉刷新和上拉加载js框架.原生js, 支持vue, 不依赖jquery, zepto, 比iScroll,dropload精简强大; 一套代码多端运行: 完美运行于android,iOS,手机各浏览器,兼容PC端主流浏览器; 参数自由搭配,随心定制,轻松拓展; 主流APP案例,丰富经典
使用方法
1. 下载并引用 mescroll.min.css , mescroll.min.js
2. 拷贝以下布局结构 :
//列表内容,如:
- 列表数据
...
3. 创建mescroll对象 :var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id
//如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
//解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
down: {
callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
},
up: {
callback: upCallback //上拉加载的回调
}
});
4. 处理回调 ://下拉刷新的回调
function downCallback() {
$.ajax({
url: 'xxxxxx',
success: function(data) {
//联网成功的回调,隐藏下拉刷新的状态;
mescroll.endSuccess(); //无参
//设置数据
//setXxxx(data);//自行实现 TODO
},
error: function(data) {
//联网失败的回调,隐藏下拉刷新的状态
mescroll.endErr();
}
});
}
//上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
function upCallback(page) {
$.ajax({
url: 'xxxxxx?num=' + page.num + "&size=" + page.size, //如何修改page.num从0开始 ?
success: function(data) {
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
//参数data.length:当前页的数据总数
//mescroll会根据data.length自动判断列表如果无任何数据,则提示空,显示empty配置的内容;
//列表如果无下一页数据,则提示无更多数据,(注意noMoreSize的配置)
//如果你需要强制显示无更多数据,则mescroll.endSuccess(0),注意noMoreSize的配置
//如果不传data.length,则仅隐藏下拉刷新的状态
mescroll.endSuccess(data.length);
//设置列表数据
//setListData(data);//自行实现 TODO
},
error: function(e) {
//联网失败的回调,隐藏下拉刷新和上拉加载的状态
mescroll.endErr();
}
});
}
php mescroll,mescroll下拉刷新和上拉加载js框架相关推荐
- android--------自定义控件ListView实现下拉刷新和上拉加载
开发项目过程中基本都会用到listView的下拉刷新和上滑加载更多,为了方便重写的ListView来实现下拉刷新,同时添加了上拉自动加载更多的功能. Android下拉刷新可以分为两种情况: 1.获取 ...
- 微信小程序下拉刷新和上拉加载
效果图 微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的 个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下 其实 ...
- 【好程序员笔记分享】——下拉刷新和上拉加载更多
-iOS培训,iOS学习-------型技术博客.期待与您交流!------------ iOS学习之路--下拉刷新和上拉加载更多 简介 本文中笔者将和大家分享应用app中常用到的表单内容的下拉刷新和 ...
- vant实现下拉刷新和上拉加载_微信小程序 - 实现下拉刷新、上拉加载
在小程序开发中使用下拉刷新和上拉加载非常多,比如常用的展示型首页,而实现这个功能有两种形式,第一种是使用 scroll-view 组件,第二种是不使用 scroll-view 组件而让整个页面刷新,那 ...
- 入门微信小程序(含实战) [第九篇] -- 下拉刷新和上拉加载
下拉刷新和上拉加载是两个独立又密切联系的功能,上拉加载需要服务器端有分页机制,而下拉刷新除了重新获取信息外还要对之前的状态和页码进行初始化. 一个一个来吧. 服务器端分页 其实yii2早就已经为我们准 ...
- iscroll.js 下拉刷新和上拉加载
html代码如下 <!DOCTYPE html> <html> <head><meta charset="utf-8"><me ...
- Flutter如何实现下拉刷新和上拉加载更多
效果 下拉刷新 如果实现下拉刷新,必须借助RefreshIndicator,在listview外面包裹一层RefreshIndicator,然后在RefreshIndicator里面实现onRefre ...
- Android下拉刷新和上拉加载更多
Android下拉刷新和上拉加载更多 下拉刷新 通过android系统提供的组件:SwipeRefreshLayout 一.基本使用 1 xml中 添加 SwipeRefreshLayout 组件 该 ...
- 下拉刷新和上拉加载 php,怎样操作vue2.0 移动端实现下拉刷新和上拉加载
这次给大家带来怎样操作vue2.0 移动端实现下拉刷新和上拉加载,操作vue2.0 移动端实现下拉刷新和上拉加载的注意事项有哪些,下面就是实战案例,一起来看一下. 直接上代码,不懂的多看几遍,下面我换 ...
最新文章
- mysql视图_mysql之视图详解
- SAP Spartacus B2B Unit page OrgUnitService.getTree方法返回的结果
- Javascript提升阶段学习
- django获取字段列表(values/values_list/flat)
- 最牛B的编码套路 - 呦呦鹿鸣 - 博客频道 - CSDN.NET
- [渝粤教育] 广东-国家-开放大学 21秋期末考试土力学与地基基础10445k1
- 软考高级系统架构设计师:论文万能模版
- PHP水果店管理系统,赢通水果店管理系统A3专业版
- HTML问答页面模板,问答社区简单静态页面模板
- 东财《国际贸易法》综合作业
- userland免root运行linux,UserLAnd(GNU/Linux安装)
- 前端面试题-10-11作用域 作用域链
- 台式电脑主机 前面音箱设置
- NR Qos 映射DRB
- 迅雷和BT有什么区别?迅雷是不是不毁硬盘?速度快吗?
- MOCTF-MISC-writeup
- 晨枫U盘维护V2.0_512M被淹死的鱼修正版
- github东西无法下载_下载GitHub上文件的两种方法
- Arduino 旋转编码器ky-040
- QRcode 二维码中插入图像分析