ajax03-使用ajax动态渲染仿短视频界面

最新推荐文章于 2022-11-15 20:08:04 发布

一只认学的程序猿

最新推荐文章于 2022-11-15 20:08:04 发布

阅读量209

点赞数

分类专栏：前端学习文章标签： js javascript html

本文链接：https://blog.csdn.net/weixin_41706310/article/details/108901868

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

依然是主移动端，rem布局，先列出大概结构，方便写css代码，如下：

<body>
<div class="videoList">
    <div class="videoList">
        <div class="videoItem">
            <div class="videoTop">
                <div class="img" style="background-image: url('http://wimg.spriteapp.cn/picture/2020/0903/84bbafce-ed8f-11ea-8969-1866daeb0df0_wpd.jpg');"></div>
                <button></button>
                <h3 class="title">追银行小姐姐全过程，看人家是怎么追女孩的</h3>
                <p>
                    <span class="icon"></span>
                    <span class="num">10</span>播放
                </p>
            </div>
            <div class="videoBottom">
                <img src="http://wimg.spriteapp.cn/profile/20180809175405412650.jpg" class="headerImg">
                <div class="right">
                    <div class="author">百思爆笑</div>
                </div>
            </div>
        </div>
    </div>
    <div class="downLoad">刷新内容</div>

    <div class="playPage">
        <video controls='controls' src="http://uvideo.spriteapp.cn/video/2020/0903/84bbafce-ed8f-11ea-8969-1866daeb0df0_wpd.mp4"></video>
        <div class="close"></div>
    </div>
</body>

videoList这个div存放每一个视频，playPage这个div用于接收点击的视频的src并占全屏幕播放，css代码如下：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.videoList {
    width: 3.75rem;
    /* height: 100vh; */
}

.videoItem {
    /* vw:相对于视口的宽度，视口被均分为100单位的vw */
    width: 100vw;
    height: 75vw;
    margin-bottom: 0.5rem;
}

.videoItem .videoTop {
    width: 100vw;
    height: 75vw;
    position: relative;
}

.videoItem .videoTop .img {
    width: 100vw;
    height: 75vw;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: black;
}

.videoItem .videoTop button {
    width: 100vw;
    height: 75vw;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.4);
    background-image: url('../img/play.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20%;
}

.videoItem .videoTop h3 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    font-size: 0.19rem;
    padding: 0.2rem;
    color: white;
}

.videoItem .videoTop p {
    position: absolute;
    width: 100vw;
    height: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    left: 0;
    bottom: 0;
    text-align: right;
    font-size: 0.19rem;
    color: white;
    padding: 0 0.1rem;
}

.videoItem .videoTop p .icon {
    width: 0.3rem;
    height: 0.2rem;
    display: inline-block;
    background: url('../img/eye.png') 100% no-repeat;
    background-position: center;
}

.videoItem .videoBottom {
    display: flex;
    width: 100vw;
    height: 0.5rem;
    align-items: center;
    background-color: antiquewhite;
}

.videoItem .videoBottom img {
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 0.15rem;
}

.videoItem .videoBottom .right {
    height: 0.5rem;
    flex: 1;
    padding: 0.1rem;
    display: flex;
    align-items: center;
}
.playPage {
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    left: 0;
    top: 0;
}

.playPage video {
    width: 100vw;
}

.close {
    width: 0.2rem;
    height: 0.2rem;
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
    background: url('../img/close.png') 60% no-repeat;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 0.1rem;
}

.downLoad {
    width: 100vw;
    height: 0.35rem;
    font-size: 0.2rem;
    text-align: center;
    line-height: 0.35rem;
    background-color: #efefef;
    color: #999;
}

接下来是比较复杂的js，总的来说大体上分为这几步：

加载数据。
通过获取到的数据渲染出视频列表。
每个视频的播放按钮绑定事件，实现播放。
播放与暂停内容、关闭。
刷新，并将界面滚回头部。

加载数据：通过ajax发出请求，事先定义一个空数组，存放所有请求回来的短视频。
通过获取到的数据渲染出视频列表：封装一个函数，循环短视频列表数组生成div追加进去，再在ajax函数中调用。
绑定事件，实现播放：利用事件冒泡，冒泡到最外层div，通过自定义data-index获取到点击的是第几个视频，将其src属性赋给video。
播放与暂停内容、关闭：调用video的对应方法，设置display属性即可。
刷新，并将界面滚回头部：点击刷新时，重新发送一次ajax请求，请求下一页信息，清空原内容，重新渲染，调用scrollTo方法滚动到头部。
代码如下：

<script>
        var httpUrl = 'https://api.apiopen.top/getJoke?page=1&count=10&type=video';
        var html = document.querySelector('html');
        var videoListDom = document.querySelector('.videoList');
        var videoList = []; //存放所有视频列表
        var playPageDom = document.querySelector('.playPage');
        var videoDom = document.querySelector('.playPage video');
        var closeDom = document.querySelector('.playPage .close');
        var downLoadDom = document.querySelector('.downLoad');
        var pageNum = 1; //控制页数

        function setRem() {
            var screenWidth = window.innerWidth; //获取屏幕宽
            var rem1 = screenWidth / 3.75; //屏幕的宽度/设计稿占满全屏幕所需的rem数量，就可以得到1rem为多少像素。
            html.style.fontSize = rem1 + 'px';
        };
        setRem();
        window.onresize = function() {
            setRem();
        };

        //1.加载数据
        getAjax1(httpUrl, function(xhr) {
            var resultObj = JSON.parse(xhr.response);
            videoList = resultObj.result;
            renderVideoList(videoList);
        });
        //2.通过获取到的数据渲染出视频列表
        function renderVideoList(videoList) {
            videoList.forEach(function(item, index) {
                var videoItem = document.createElement('div');
                videoItem.className = 'videoItem';
                videoItem.innerHTML = `
                <div class="videoTop">
                    <div class="img" style="background-image: url(${item.thumbnail});"></div>
                    <button type='button' data-index='${index}'></button>
                    <h3 class="title">${item.text}</h3>
                    <p>
                        <span class="icon"></span>
                        <span class="num">${item.up}</span>播放
                    </p>
                </div>
                    <div class="videoBottom">
                    <img src=${item.header} class="headerImg">
                    <div class="right">
                        <div class="author">${item.name}</div>
                    </div>
                </div>
                `;
                videoListDom.appendChild(videoItem);
            });
        }

        //3.每个视频的播放按钮绑定事件，实现播放
        videoListDom.addEventListener('click', function(e) {
            //只有当点击的是按钮的时候，才会继续
            if (e.target.tagName == 'BUTTON') {
                var index = e.target.dataset.index;
                var item = videoList[index];
                //播放视频
                playPageDom.style.display = 'block';
                videoDom.src = item.video;
                videoDom.play();
            }
        });

        //4.关闭视频页
        closeDom.addEventListener('click', function() {
            playPageDom.style.display = 'none';
            videoDom.pause();
        });

        //5.刷新
        downLoadDom.addEventListener('click', function() {
            pageNum++;
            var httpUrl = `https://api.apiopen.top/getJoke?page=${pageNum}&count=10&type=video`;
            getAjax1(httpUrl, function(xhr) {
                var resultObj = JSON.parse(xhr.response);
                videoList = resultObj.result;
                videoListDom.innerHTML = '';
                renderVideoList(videoList);
                scrollTo(0, 0); //滚动到头部
            });
        });
    </script>

一只认学的程序猿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax03-使用ajax动态渲染仿短视频界面

依然是主移动端，rem布局，先列出大概结构，方便写css代码，如下：<body><div class="videoList"> <div class="videoList"> <div class="videoItem"> <div class="videoTop"> <div class="img" style="background-image: url(
复制链接

扫一扫