前端窗口聊天效果

HTML:


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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('
' + item.title + '
'
); 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"
    }
  ]
}


你可能感兴趣的:(javascrip,store)