HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8; IE=EDGE"> <meta name="format-detection" content="telephone=no"> <script src="../common/jquery-3.1.1.js"></script> <script src="../common/store.legacy.min.js"></script> </head> <style> .headPic{ margin: 50px 0; } </style> <body> <button class="next" style="position: fixed;height: 20px;width:100%;top: 0;">下一条</button> <div id="chat"> <div id="chatting"></div> </div> </body> <script> function isBottom() { var chatHeight=parseInt($('#chatting').get(0).offsetHeight); //#chatting div的高度 $(document).scrollTop(chatHeight); } $(function () { $.ajax({ url: '../json/chat.json', type: 'get', dataType: 'json', success: function (data) { ajaxData = data.data; setData(ajaxData); } }); function setData(data) { var count = store.get('count') || 0; if (count) { //有缓存时加载缓存 for (var i = 0; i < count; i++) { chatting(data[i]); } } else { //无缓存时加载第一条 chatting(data[0]); } isBottom(); } function chatting(item) { //渲染#chatting内容 var _html =$('#chatting').append('<div class="headPic"><img src="../img/1.png" style="height: 40px;width: 40px;margin-right: 40px"/>' + item.title + '</span></div>'); return _html; } $(".next").click(function () { //没缓存时点下一条从data[1]开始 var count = store.get('count') || 1; console.log(ajaxData); chatting(ajaxData[count++]); isBottom(); store.set('count', count); }); }); </script> </html>
json:
{ "code": 200, "data": [ { "id":"1", "title":"hello" }, { "id":"2", "title":"test2" }, { "id":"3", "title":"test3" }, { "id":"4", "title":"test4" }, { "id":"5", "title":"test5" }, { "id":"6", "title":"test6" }, { "id":"7", "title":"test7" }, { "id":"8", "title":"test8" } ] }