手机端页面下拉加载数据的笨办法--点击按钮添加数据

因为页面是根据数据库查出来的数据，有通过分页来显示数据，默认使用 page:1,size:10  (1页显示10条数据)来显示，如果所有数据为99条，那么想通过点击10条数据后的一个“加载数据...”的按钮，每点击一次，增加一次page的值，同时再调用一次查询数据的方法，以此类推，显示所有数据。如果最后一页小于10条数据，则提示并隐藏该按钮。下面看方法：

首先，给page给个变量，默认它为 1，使用它作为查询方法的参数。这个点击事件要放在DOM加载完成之后执行：

　　　　　　//点击按钮分页加载
            var pagenum=1;
            $(function() {
                //首次查询
                getDoctorProblem();
                //点击分页加载
                $('#loadData').on('click',function(){
                     pagenum = pagenum + 1;
                    console.log("按钮点击的次数：" + pagenum);
　　　　　　　　　　　　//再次查询
                    getDoctorProblem(pagenum);
                })
            });

把page的变量作为参数传给查询数据的方法，下面是我自己的数据：

//查询医生问题
            function getDoctorProblem(pagenum) {
                $.ajax({
                    type: "get",
                    url: searchDoctorProblemList(),
                    data: {
                        page: pagenum,
                        size: "10",
                        userId: doctorId
                    },
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function(data) {
                        //判断，如果小于10条数据，有个提示并隐藏加载数据按钮
                        if(data.length < 10){
                            weui.topTips('再次加载数据小于10条');
                            page.find('#loadData').css('display','none');
                        }

                        for(var i = 0; i < data.length; i++) {
                            var panel = panel_a.clone();

                            var user_p_img = data[i].imgs; //问题图片
                            var user_p_dec = data[i].itemContent; //问题内容
                            var user_p_time = data[i].expireIn; //问题剩余时间
                            var user_name = data[i].asker.patientName; //姓名
                            var user_age = data[i].asker.patientAge; //年龄
                            var user_sex = data[i].asker.patientSex; //性别
                            var user_avatar = data[i].asker.avatarUrl ? data[i].asker.avatarUrl : user_icon; //头像
                            var dialogId = data[i].dialogId;
                            var userId = data[i].asker.userId;
                            var dialogState = data[i].dialogState;
                            
                            //如果有追问的状态，显示在列表页后
                            var status = "";
                            if(dialogState == 5){
                                status = "追问";
                                var continueAskStatus = $('<li class="weui-media-box__info__meta weui-media-box__info__meta_extra status"></li>');
                                panel.find('.weui-media-box__info:eq(1)').append(continueAskStatus);
                                panel.find('.status').text(status);
                            }

                            //根据panel-i的class跳转
                            panel.addClass('panel-' + i);

                            //循环问题的图片
                            if(user_p_img.length > 0) {
                                for(var j = 0; j < user_p_img.length; j++) {
                                    var p_img = user_p_img[j].img;
                                    imgDom.attr('src', p_img);
                                    if(p_img != 'undefined') {
                                        panel_img.append(imgDom);
                                    }
                                }
                            }

                            //查找到节点，在对应的节点上添加内容
                            panel.find('.user-header').attr('src', user_avatar);
                            panel.find('.user-name').text(user_name);
                            panel.find('.user-age').text(user_age).append("岁");
                            panel.find('.user-des').text(user_p_dec);
                            
                            //判断时间是否过期
                            if(user_p_time > 3600000) {
                                //user_p_time/3600000   毫秒转小时
                                //Math.round()  四舍五入取整
                                panel.find('.user-problem-time').text(Math.round(user_p_time/3600000));
                            }

                            //判断如果是男的，就把性别替换为一张图片
                            if(user_sex == 'F') {
                                panel.find('.usr-sex').attr('src', woman_img);
                            } else {
                                panel.find('.usr-sex').attr('src', man_img);
                            }

                            //把这个list 添加到tab1的节点中
                            tab1.append(panel);
                            
                            $('.panel-' + i).on('click', function() {
                                //判断跳转位置
                                if(dialogState == '0'){
                                    window.location.href = 'doctor_ask_problem.html?dialogId=' + dialogId;
                                }else if(dialogState == '1'){
                                    window.location.href = 'doctor_problem_stay_evaluate.html?dialogId=' + dialogId;
                                }else if(dialogState == '2'){
                                    window.location.href = 'doctor_problem_has_end.html?dialogId=' + dialogId;
                                }else if(dialogState == '3'){
                                    window.location.href = 'doctor_problem_already_evaluate.html?dialogId=' + dialogId;
                                }else if(dialogState == '5'){
                                    window.location.href = 'doctor_problem_stay_evaluate.html?dialogId=' + dialogId;
                                }
                            });
                        }
                    },
                    error: function(data) {
                        weui.topTips('没有查询到数据！');
                    }
                });
            }

在方法的的最后，使用jQuery的插入DOM节点的方法将按钮放置在显示数据的后面：

var loadDataBtn = $('<div id="loadData" class="weui-jiaj_load-title">点击加载数据...</div>');

//改变查询参数,显示多条数据
  page.find('.weui_tab_bd').append(loadDataBtn);

上个截图：