前端窗口聊天效果

最新推荐文章于 2024-05-13 19:22:45 发布

泡泡菌

最新推荐文章于 2024-05-13 19:22:45 发布

阅读量2.6k

点赞数

分类专栏： store javascrip

本文链接：https://blog.csdn.net/Junpaopao/article/details/78806740

版权

javascrip 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

store

1 篇文章 0 订阅

订阅专栏

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"
    }
  ]
}

泡泡菌

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端窗口聊天效果

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-scala
复制链接

扫一扫