下拉刷新获取数据的小程序

这个小程序是用西门大大写好的JQ来实现的,

西门大大传送门 :http://ons.me/526.html

我只是讲解里面的步骤,  JS 和 CSS  引入之后

$(function(){    // 页数    var page = 0;     // 每页展示5个    var size = 5;    // dropload    $('.content').dropload({        scrollArea : window,        loadDownFn : function(me){            page++;            // 拼接HTML            var result = '';            $.ajax({                type: 'GET',                url: "<?php echo U('ajaxlis','',FALSE); ?>?page="+page+"&size="+size, //这里我用的是TP,这里地址是ajax的控制器                dataType: 'json',                success: function(data){                    var arrLen = data.length;                    if(arrLen > 0){                        for(var i=0; i<arrLen; i++){//这个是返回的数据, 需要自己修改                            result +=  '<img class="img-responsive col-xs-12" src="__PUBLIC__/img/1.jpg">'                                        +'<a class="col-xs-12 " href="#">'+data[i].title+'</a>'                                        +'<a class="col-xs-4 " href="#">'+data[i].style_name+'/'+data[i].type_name+'</a>';                                              }                    // 如果没有数据                    }else{                        // 锁定                        me.lock();                        // 无数据                        me.noData();                    }                    // 为了测试，延迟1秒加载                    setTimeout(function(){                        // 插入数据到页面，放到最后面                        $('.lists').append(result);                        // 每次数据插入，必须重置                        me.resetload();                    },1000);                },                error: function(xhr, type){                    alert('Ajax error!');                    // 即使加载出错，也得重置                    me.resetload();                }            });        }    });});</script>

ajax 控制器,  这个很好写,  但是还是贴出来把

public function ajaxlis(){//获取到GET传输的数据, 然后通过数据查下拉的数据, 然后返回给页面,  成了,if(IS_GET){$page = I('get.page');$size = I('get.size');$size = $page+$size;$db = M('Case');$data['newinfo'] = $db -> alias('a') -> field('a.pic_fm,a.title,b.style_name,c.type_name') -> JOIN('LEFT JOIN cs_styles as b ON a.style = b.type LEFT JOIN cs_houses_type as c ON a.type = c.type') -> limit($page,$size) -> select();$this -> ajaxReturn($data['newinfo']);}}

西门大大的代码很好, 3Q.