mui前端框架下拉刷新分页加载数据
前台
mui.init();
(function($) {
//阻尼系数
var deceleration = mui.os.ios?0.003:0.0009;
$('.mui-scroll-wrapper').scroll({
bounce: false,
indicators: true, //是否显示滚动条
deceleration:deceleration
});
$.ready(function() {
//循环初始化所有下拉刷新,上拉加载。
$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
if(index==0){
// alert(index);
$(pullRefreshEl).pullToRefresh({
down: {
callback:pulldownRefresh_zhengu
},
up: {
callback: pullupRefresh_zhengu }
});
}else{
// alert(index);
$(pullRefreshEl).pullToRefresh({
container:"#item2mobile .mui-scroll",
down: {
callback: pulldownRefresh_guandian },
up: {
callback: pullupRefresh_guandian
}
});
} });
bbb(1);
aaa(1);
var page = 1;
var sum;
var page1 = 1;
var su;
/*诊股开始*/
function pulldownRefresh_zhengu(){
var self = this;
page++;
setTimeout(function() {
bbb(page);
self.endPullDownToRefresh((sum <= page));
}, 1000);
}
function pullupRefresh_zhengu(){
var self = this;
page++;
setTimeout(function() {
bbb(page);
self.endPullUpToRefresh((sum <= page));
}, 1000);
}
/*诊股结束*/
/**观点开始**/
function pulldownRefresh_guandian(){
var self = this;
page1++;
setTimeout(function() {
aaa(page1)
self.endPullDownToRefresh();
}, 1000);
}
function pullupRefresh_guandian(){
var self = this;
page1++;
setTimeout(function() {
aaa(page1);
self.endPullUpToRefresh();
}, 1000);
}
/**观点结束**/ }); })(mui);
然后写ajax请求,带入分页page。
后台对传过来的page参数进行处理:
$page = I('page'); //获取请求的页数
$pagenum = 15; //每页数量
$start = ($page-1) * $pagenum;
//查询数据
limit($page,$pagenum)
mui前端框架下拉刷新分页加载数据的更多相关文章
- 微信小程序实战篇-下拉刷新与加载更多
下拉刷新 实现下拉刷新目前能想到的有两种方式 1. 调用系统的API,系统有提供下拉刷新的API接口 2. 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一个binds ...
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)
移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...
- H5 下拉刷新、加载更多
H5 下拉刷新.加载更多 demos const autoLoadMore = (url = ``) => { // todo ... } refs xgqfrms 2012-2020 www. ...
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)[转]
使用方法 引用css和js <link rel="stylesheet" href="../dist/dropload.min.css"> < ...
- 【微信小程序】转载:微信小程序实战篇-下拉刷新与加载更多
下拉刷新 实现下拉刷新目前能想到的有两种方式 1. 调用系统的API,系统有提供下拉刷新的API接口 当然,你可以直接在全局变量app.json的window里面配置上面这个属性,这样整个项目都允许下 ...
- apicloud如何实现优雅的下拉刷新与加载更多
apicloud中提供下拉刷新监听事件api,也提供滚动到底部事件的监听,能够实现下拉刷新和滚动到底部加载更多功能,但是我们真的就满足实现功能了吗?将两个代码拼凑起来运行看看发现了什么?是的,在滚动到 ...
- 自己定制ListView,上拉刷新和下拉刷新,加载网络图片,并且添加缓存机制。
package com.lixu.listviewrefresh; import java.util.ArrayList; import java.util.HashMap; import java. ...
- 解决:mui 的 选项卡 + 下拉刷新 功能,在其中嵌入 iframe 后,在 iphone 的情况下,iframe 的内容不能滚动,只显示第一屏内容。
我所遇到的情况是,使用 mui 的 选项卡 + 下拉刷新 功能时,其中有2个页面是嵌入了别的网站的页面,而别个几个是通过 ajax 加载本网站的数据.然后 在其中嵌入 iframe 后,在 iphon ...
- java攻城狮之路(Android篇)--widget_webview_metadata_popupwindow_tabhost_分页加载数据_菜单
一.widget:桌面小控件1 写一个类extends AppWidgetProvider 2 在清单文件件中注册: <receiver android:name=".ExampleA ...
随机推荐
- Pycharm中文显示异常
pycharm2019,中文显示乱码异常,配置了encoding为utf8还是不行,需要设置备用字体 原因是某些英文字体库不支持非英文字符,无法显示 设置fallback字体 File-setting ...
- 引用自定义的css或者js文件
用script标签,src是js文件路径 <script type="text/javascript" src="./js/udc.js">< ...
- ps -aux显示信息COMMAND不全
ps -aux结果: ps -auxwww结果:
- XML 简介 – 什么是 XML?
XML 指可扩展标记语言(eXtensible Markup Language). XML 被设计用来传输和存储数据. XML 很重要,也很容易学习. <?xml version="1 ...
- 湖南省第十二届省赛:Parenthesis
Description Bobo has a balanced parenthesis sequence P=p1 p2…pn of length n and q questions. The i-t ...
- Springboot(八):emoji表情保存到mysql出错的解决办法
emoji表情保存到mysql出错的解决办法 今天,在前端的说明信息中输入emoji表情的时候,插入数据库会报错 百度了一下,是因为mysql数据库的字符编码集不正确,utf8无法存入表情字符,只能将 ...
- 测试常用命令之awk篇
awk/gawk 1,内置变量 FILENAME:输入文件名称 FNR:当前数据文件中的数据行数 NF:数据文件中的字段总数 NR:已处理的输入数据行数目 FS:输入数据段分隔符 RS:输入数据行分隔 ...
- 测试常用linux命令之sed篇
一.sed命令 可以放在单独的脚本文件中执行:sed -f script1 data1 多条命令也可以用{}括起来 sed可以进行文本的替换,删除,行添加,打印等.采用 sed [address]{c ...
- 解决img标签与其它标签间隙问题?
解决img标签间距问题 关于img标签间距问题:多个img之间有间距,包含img标签的div之间有间距 代码如下: <!DOCTYPE html> <html> <hea ...
- smartload跨浏览器极速缓存插件用法
smartload由39smart团队原创,主要实现前端css/js的一次加载请求,永久缓存的加速效果,在移动端效果非常明显. 插件特点: 支持平台: PC和移动端所有版本浏览器,ie6+,firef ...