AJAX 下拉无刷新分页加载

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/71641379

 背景:

最近在手机端开发功能显示列表数据时发现,如果数据过多,造成图片加载延迟,不适合即时的效果呈现,既影响用户体验,又显得没有技术含量,毕竟最后的说辞都怪在了倒霉程序猿的头上。通过度娘的帮助和自己的测试,可以提供下面的一种方式,个人使用的是PHP开发,代码都是相通的,都可以借鉴优化。

实现步骤:

1.构造Controller控制器

代码做了简化,废话不多说,直接上代码,其中loading()为对应的界面显示方法,loadpage() 方法为ajax请求的数据获取地址;searchInfo() 为自定义数据库信息获取的函数。

2.前端页面设计

毕竟代码框架是 ThinkPHP ,可能会对自己的理解有出入,不过大同小异,参考代码如下:

3.js代码实现

重要的就是js代码的实现,绑定下拉事件的触发

4.实现效果截图

补充:

1.css代码就不上传了,其中提示框的效果是引用layer.js框架而实现的,建议可以百度学习一下,挺简单实用的

2.后台代码中,使用了一个函数 showMsg(), 是自己构造的一个公共函数,可以参考使用,方便代码的 json数据获取和程序终止实现

function showMsg($status,$message,$data=array()){
    $result = array(
        'status' => $status,
        'message' =>$message,
        'data' =>$data
    );
    exit(json_encode($result));
}

源代码下载 >>>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JAVA同学会

JMeter基本元素简介

  测试计划对象有一个复选框叫做“Functional Testing”(函数测试模式),如果选中,它将使jmeter记录服务端返回的每一个样例的数据,如果你在...

1283
来自专栏互联网软件技术

input上传文件个数控制

4463
来自专栏carven

xss总结记录

最近工作小组上,集中精力提高安全意识。而XSS作为全端安全中最常见的问题之一,我们也做了着重的学习。 XSS全称跨站脚本(Cross Site Scriptin...

1090
来自专栏从零开始学自动化测试

pytest文档12-skip跳过用例

pytest.mark.skip可以标记无法在某些平台上运行的测试功能,或者您希望失败的测试功能

2093
来自专栏重庆的技术分享区

TensorFlow版本更新后运行代码所遇到的error(持续更新)

1663
来自专栏Pythonista

初识Django

框架,即framework,特制为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统。

1351
来自专栏Python小屋

Python使用标准库urllib模拟浏览器爬取网页内容

爬取网页内容的第一步是分析目标网站源代码结构,确定自己要爬取的内容在哪里,这要求对HTML代码有一定了解,对于某些网站内容的爬取还需要具有一定的Javascri...

1001

Kafka体系结构:日志压缩

这篇文章是从我们介绍Kafka 体系结构的一系列文章中获得的启发,包括Kafka topic架构,Kafka生产者架构,Kafka消费者架构和Kafka生态系统...

2943
来自专栏我有一个梦想

Python 项目实践三(Web应用程序)第一篇

一 Djangao入门 当今的网站实际上都是富应用程序(rich application),就像成熟的桌面应用程序一样。Python提供了一组开发Web应用程序...

3666
来自专栏乐沙弥的世界

Nginx内置状态信息(http_stub_status)

Nginx提供了一个内置的状态信息监控页面,可用于监控Nginx的整体访问情况。这个内置功能由模块ngx_http_stub_status_module实现。如...

952

扫码关注云+社区

领取腾讯云代金券