上面动图是实现的效果。

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

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文件

这两个文件已经准备好了

大功告成！