前台

  1. mui.init();
  2. (function($) {
  3. //阻尼系数
  4. var deceleration = mui.os.ios?0.003:0.0009;
  5. $('.mui-scroll-wrapper').scroll({
  6. bounce: false,
  7. indicators: true, //是否显示滚动条
  8. deceleration:deceleration
  9. });
  10. $.ready(function() {
  11. //循环初始化所有下拉刷新,上拉加载。
  12. $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
  13. if(index==0){
  14. // alert(index);
  15. $(pullRefreshEl).pullToRefresh({
  16. down: {
  17. callback:pulldownRefresh_zhengu
  18. },
  19. up: {
  20. callback: pullupRefresh_zhengu
  21.  
  22. }
  23. });
  24. }else{
  25. // alert(index);
  26. $(pullRefreshEl).pullToRefresh({
  27. container:"#item2mobile .mui-scroll",
  28. down: {
  29. callback: pulldownRefresh_guandian
  30.  
  31. },
  32. up: {
  33. callback: pullupRefresh_guandian
  34. }
  35. });
  36. }
  37.  
  38. });
  39. bbb(1);
  40. aaa(1);
  41. var page = 1;
  42. var sum;
  43. var page1 = 1;
  44. var su;
  45. /*诊股开始*/
  46. function pulldownRefresh_zhengu(){
  47. var self = this;
  48. page++;
  49. setTimeout(function() {
  50. bbb(page);
  51. self.endPullDownToRefresh((sum <= page));
  52. }, 1000);
  53. }
  54. function pullupRefresh_zhengu(){
  55. var self = this;
  56. page++;
  57. setTimeout(function() {
  58. bbb(page);
  59. self.endPullUpToRefresh((sum <= page));
  60. }, 1000);
  61. }
  62. /*诊股结束*/
  63. /**观点开始**/
  64. function pulldownRefresh_guandian(){
  65. var self = this;
  66. page1++;
  67. setTimeout(function() {
  68. aaa(page1)
  69. self.endPullDownToRefresh();
  70. }, 1000);
  71. }
  72. function pullupRefresh_guandian(){
  73. var self = this;
  74. page1++;
  75. setTimeout(function() {
  76. aaa(page1);
  77. self.endPullUpToRefresh();
  78. }, 1000);
  79. }
  80. /**观点结束**/
  81.  
  82. });
  83.  
  84. })(mui);

然后写ajax请求,带入分页page。

后台对传过来的page参数进行处理:

  1. $page = I('page'); //获取请求的页数
  2. $pagenum = 15; //每页数量
  3. $start = ($page-1) * $pagenum;
  4. //查询数据
  5. limit($page,$pagenum)

mui前端框架下拉刷新分页加载数据的更多相关文章

  1. 微信小程序实战篇-下拉刷新与加载更多

    下拉刷新 实现下拉刷新目前能想到的有两种方式 1. 调用系统的API,系统有提供下拉刷新的API接口 2. 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一个binds ...

  2. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)

    移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...

  3. H5 下拉刷新、加载更多

    H5 下拉刷新.加载更多 demos const autoLoadMore = (url = ``) => { // todo ... } refs xgqfrms 2012-2020 www. ...

  4. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)[转]

    使用方法 引用css和js <link rel="stylesheet" href="../dist/dropload.min.css"> < ...

  5. 【微信小程序】转载:微信小程序实战篇-下拉刷新与加载更多

    下拉刷新 实现下拉刷新目前能想到的有两种方式 1. 调用系统的API,系统有提供下拉刷新的API接口 当然,你可以直接在全局变量app.json的window里面配置上面这个属性,这样整个项目都允许下 ...

  6. apicloud如何实现优雅的下拉刷新与加载更多

    apicloud中提供下拉刷新监听事件api,也提供滚动到底部事件的监听,能够实现下拉刷新和滚动到底部加载更多功能,但是我们真的就满足实现功能了吗?将两个代码拼凑起来运行看看发现了什么?是的,在滚动到 ...

  7. 自己定制ListView,上拉刷新和下拉刷新,加载网络图片,并且添加缓存机制。

    package com.lixu.listviewrefresh; import java.util.ArrayList; import java.util.HashMap; import java. ...

  8. 解决:mui 的 选项卡 + 下拉刷新 功能,在其中嵌入 iframe 后,在 iphone 的情况下,iframe 的内容不能滚动,只显示第一屏内容。

    我所遇到的情况是,使用 mui 的 选项卡 + 下拉刷新 功能时,其中有2个页面是嵌入了别的网站的页面,而别个几个是通过 ajax 加载本网站的数据.然后 在其中嵌入 iframe 后,在 iphon ...

  9. java攻城狮之路(Android篇)--widget_webview_metadata_popupwindow_tabhost_分页加载数据_菜单

    一.widget:桌面小控件1 写一个类extends AppWidgetProvider 2 在清单文件件中注册: <receiver android:name=".ExampleA ...

随机推荐

  1. Elasticsearch:aggregation介绍

    聚合(aggregation)功能集是整个Elasticsearch产品中最令人兴奋和有益的功能之一,主要是因为它提供了一个非常有吸引力对之前的facets的替代. 在本教程中,我们将解释Elasti ...

  2. win7如何设置以管理员身份运行

    一.对所有程序以管理员身份运行 1.右键单击桌面“计算机”,选择“管理” 2.在页面左侧,依此打开“计算机管理(本地)→ 系统工具→本地用户和组→用户”,在右侧找到“Administrator”,双击 ...

  3. std::string 和 CString问题

    std::string stdTemp; CString strTemp; strTemp = stdTemp;    ;//这一步直接赋值可不可以 因为CString可以接受const char*的 ...

  4. CodeForces 1100F Ivan and Burgers

    CodeForces题面 Time limit 3000 ms Memory limit 262144 kB Source Codeforces Round #532 (Div. 2) Tags da ...

  5. gridbagsizer

    #coding:utf-8 import wx labels='1 2 3 4 5 6 7 8 9 '.split() class TestFrame(wx.Frame): def __init__( ...

  6. sqli-labs(31)

    0x01找闭合 这里是WAF的jsp调到php的同样 第二个参数构造 偷看源码 闭合是") 我们尝试一下构造爆破数据库名 login.php?id=&id=-") unio ...

  7. socket的补充

  8. centos7没有IP地址

    查看网卡 ip addr查看网卡 我截图中有ip,是因为我已经设置过了. eth0是对外的网卡,我们接下来设置这个网卡,你的网卡名字可能和我的不一样. 修改网卡 修改/etc/sysconfig/ne ...

  9. legend2---lamp.sh一键安装lamp环境需要爬的坑

    legend2---lamp.sh一键安装lamp环境需要爬的坑 一.总结 一句话总结: 1.要记得更改项目权限:chown -R apache:apache /data/www/default/网站 ...

  10. 【零售App】—— react/ant design mobile项目爬坑

    一.H5制作 - 图片文本的动画效果 bug:打开一个模板,添加图片,添加动画效果,若先选定动画效果,再调节动画时间和延迟时间,则动画和延迟时间没有改变:若先调节动画时间和延迟时间在选定动画效果,则动 ...