专栏首页木头编程 - moTzxxAJAX 下拉无刷新分页加载

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 条评论
登录 后参与评论

相关文章

  • layui 图片上传控件 自定义基础参数的获取

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    泥豆芽儿 MT
  • PHP 生成随机码探索

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

    泥豆芽儿 MT
  • PHP QRCode 生成二维码

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

    泥豆芽儿 MT
  • 探秘 | 写了一百万行代码是什么体验?

    搞程序的累计写到一百万行代码到底是什么体验呢? 如果一百万是标量的话,来和大家研究一下这个数据,假设最好的情况,一天100行高质量代码,一年36500,100/...

    灯塔大数据
  • 关于烂代码的那些事 – 评价代码优劣的方法

    秦迪,微博研发中心技术专家,2013 年加入微博,负责微博平台通讯系统的设计和研发、微博平台基础工具的开发和维护,并负责微博平台的架构改进工作,在工作中擅长排查...

    AWeiLoveAndroid
  • 怎么让代码更Pythonic?光有技巧可不行,你还需要看这些

    写代码如同写文章,好的文章是反复修改出来的,代码也同样是反复的重构出来的。今天给大家分享下,怎么从一个编程学习者变为一个程序猿(程序媛)!起码不要让别人一看你的...

    云飞
  • 程序员,请优先提高代码的可读性

    现在,当有人提及“优化”一词时,他们通常是指“优化执行时间”,除非他们明确表明要优化GPU的内存消耗,网络流量等等。

    java思维导图
  • 程序员请改掉影响你升职加薪的36个坏习惯!

    IT行业的科技公司们一直苦苦追寻传说中以一当十的超级程序员,最新的研究表明确实存在这样一小撮效率奇高的“程序金刚”,但是一位普通程序猿如何能够蜕变成代码金刚呢?

    Java后端技术
  • 细节决定品质:不良的if/else使用习惯

    这个时候应当考虑提取成函数调用,以减少直接的if/else嵌套层次。同理,while/for也应当避免这种情况。

    一见
  • IDEA 代码规范插件

    这时候就必须得有一些代码规范,来统一团队代码;IEDA中,有一个插件(Alibaba Java Coding Guidelines)帮我们很好的解决了这一问题;

    Dawnzhang

扫码关注云+社区

领取腾讯云代金券