ajax实现下拉刷新+上拉加载

MockingBird 发布于2019-07-01 10:02 / 1110人阅读

摘要：上面动图是实现的效果。纵使上线又如何，新版本，继续忙。擦肩美女不屑看，三千码友在身旁。久易无定论，命悬需求方，四顾前途路，一步三踉跄。码农压力大，愿君更健康需要引入两个文件这两个文件已经准备好了大功告成

上面动图是实现的效果。

全程无需重新加载整个页面，只需要上下拉即可刷新数据！

index.html




    
    上拉加载
    

    
    



上拉加载，下拉刷新

    
        
            这里显示部分数据
            这里显示部分数据
            这里显示部分数据
            这里显示部分数据
            这里显示部分数据
        
        
            上拉加载
        
    

底部

data.json

[
  {
    "text":"十年编程两茫茫，工期短，需求长。",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"千行代码，Bug何处藏。",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"纵使上线又如何，新版本，继续忙。",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"黑白颠倒没商量，睡地铺，吃食堂。",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"夜半梦醒，无人在身旁。",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"最怕灯火阑珊时，手机响，心里慌。",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"是，程序员设计了程序",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"还是，程序造就了程序员？",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"程序，程序员——你的名字，我的姓氏",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"日撸代码三千行，疯狂、疯狂，人未老，珠已黄。",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"少年投身IT行，老来无伴又何妨。擦肩美女不屑看，三千码友在身旁。",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"老夫聊发少年狂，不小心，选错行。误入IT，两眼泪茫茫",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"夜半话凄凉，转眼泪千行，日日工期紧，亦为重构忙。久易无定论，命悬需求方，四顾前途路，一步三踉跄。",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"IT放两旁，闲来把码敲，余音仍绕梁。码农压力大，愿君更健康！",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"111111111111",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"22222",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"33333",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"4444",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"55555",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"66666",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"7777",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"88888",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"99999",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"1010101010",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"1.1.1.1.1.1.1.1.1.1.",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"12121212121212",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"1131313133131",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"1414141414",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"1515151515151",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"111111111111",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"111111111111",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"111111111111",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"111111111111",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"111111111111",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"111111111111",
    "date":"2018-02-02 14:00"
  },
  {
    "text":"111111111111",
    "date":"2018-02-02 14:00"
  }

]

需要引入两个js文件
jquery-2.2.4.min.js
iscroll.js

这两个文件已经准备好了

https://pan.baidu.com/s/1dGST...

大功告成！

GPU云服务器云服务器上拉加载 js上拉加载数据 ajax实现页面刷新下拉刷新

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/28727.html

ajax实现下拉刷新+上拉加载

摘要：上面动图是实现的效果。纵使上线又如何，新版本，继续忙。擦肩美女不屑看，三千码友在身旁。久易无定论，命悬需求方，四顾前途路，一步三踉跄。码农压力大，愿君更健康需要引入两个文件这两个文件已经准备好了大功告成 showImg(https://segmentfault.com/img/bVbbsLu?w=460&h=827); 上面动图是实现的效果。全程无需重新加载整个页面，只需要上下拉即可...

Yumenokanata 2019-08-26 11:55 评论0 收藏0
移动端用下拉刷新的方式实现上拉加载

摘要：样式最外面的盒子设置中间盒子不设置高度，靠子盒子撑起。实现上拉加载最普遍的方式就是监听滚动条的滚动事件，而移动端的下拉刷新利用的是transform属性来进行位移，那用下拉刷新的方式实现上拉加载怎么样? html结构这里我们做了两个主要的盒子，在两个盒子内实现上拉加载。结构很简单。 css样式 * { ...

haitiancoder 2019-08-23 13:57 评论0 收藏0
移动端用下拉刷新的方式实现上拉加载

摘要：样式最外面的盒子设置中间盒子不设置高度，靠子盒子撑起。实现上拉加载最普遍的方式就是监听滚动条的滚动事件，而移动端的下拉刷新利用的是transform属性来进行位移，那用下拉刷新的方式实现上拉加载怎么样? html结构这里我们做了两个主要的盒子，在两个盒子内实现上拉加载。结构很简单。 css样式 * { ...

FrozenMap 2019-08-02 12:13 评论0 收藏0
移动端用下拉刷新的方式实现上拉加载

摘要：样式最外面的盒子设置中间盒子不设置高度，靠子盒子撑起。实现上拉加载最普遍的方式就是监听滚动条的滚动事件，而移动端的下拉刷新利用的是transform属性来进行位移，那用下拉刷新的方式实现上拉加载怎么样? html结构这里我们做了两个主要的盒子，在两个盒子内实现上拉加载。结构很简单。 css样式 * { ...

cod7ce 2019-08-30 15:54 评论0 收藏0