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

最新推荐文章于 2024-02-18 14:51:51 发布

PHP苦海无边

最新推荐文章于 2024-02-18 14:51:51 发布

阅读量458

点赞数

本文链接：https://blog.csdn.net/qq_34399950/article/details/78200882

版权

这个小程序是用西门大大写好的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.