zoukankan      html  css  js  c++  java
  • 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)
  • 相关阅读:
    【分布式锁】RedLock 实现分布式锁
    【反射】遍历对象属性名与值
    【ABP.Net】2.多数据库支持&&初始化数据库
    【ABP.Net】1.创建项目&介绍框架结构
    【Vue-Cli3.0】【2】渲染
    【nuget】PackageReference
    【Vue-Cli3.0】【1】创建一个Vue-Cli3.0的项目
    【干货】干货篇
    踩坑记录-Redis(Windows)的getshell
    极致CMS存储XSS|前台打后台COOKIE漏洞复现
  • 原文地址:https://www.cnblogs.com/guoyachao/p/7198847.html
Copyright © 2011-2022 走看看