资讯专栏INFORMATION COLUMN

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

MockingBird / 1045人阅读

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

上面动图是实现的效果。

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

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...

大功告成!

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

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

相关文章

  • ajax实现下拉刷新+拉加

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

    Yumenokanata 评论0 收藏0
  • 移动端用下拉刷新的方式实现拉加

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

    haitiancoder 评论0 收藏0
  • 移动端用下拉刷新的方式实现拉加

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

    FrozenMap 评论0 收藏0
  • 移动端用下拉刷新的方式实现拉加

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

    cod7ce 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<