区块链技术博客
www.b2bchain.cn

vue实战 实现视频类webapp:(十二) 视频评论列表求职学习资料

本文介绍了vue实战 实现视频类webapp:(十二) 视频评论列表求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

仓库传送门

本节包含如下内容:

  • 1.前端冒泡事件
  • 2.vue冒泡事件处理
  • 3.vue transition动画实现
  • 4.视频评论列表实现

最终实现效果

vue实战 实现视频类webapp:(十二) 视频评论列表

1.前端冒泡事件

什么是冒泡和阻止冒泡的原因和方法

1 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生。
当事件发生后,这个事件就要开始传播。为什么要传播呢?因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件)。
当事件在传播过程中,找到了一个能够处理它的函数,这时候我们就说这个函数捕捉到了这个事件。
说到这里,关键的问题来了,那就是一个函数是如何捕捉一个事件的呢?这就涉及到事件的冒泡了

2.Vue如何处理冒泡事件

  • .prevent 阻止父元素的事件
  • stop 阻止事件冒泡

3.vue transition动画实现

transition:官方链接地址
系统介绍:transition

vue的内置组件,可以给任意元素包裹并且添加离开进入的动画效果,官方文档已经介绍的很详细了,这里就简单举个例子
在routerView中用transition包裹,实现页面切换动画效果

<transition name="fade-transform" mode="out-in">     <router-view></router-view> </transition>
/* fade-transform */ .fade-transform-leave-active, .fade-transform-enter-active {   transition: all .5s; }  .fade-transform-enter {   opacity: 0;   transform: translateX(-30px); }  .fade-transform-leave-to {   opacity: 0;   transform: translateX(30px); }

4.视频评论列表实现

4.1:实现评论列表

  • videoList.vue 代码如下
<template>   <div class="video-list">     <swiper :options="swiperOptions">       <swiper-slide v-for="(item, index) in dataList" :key="index">         <div>           <Videos ref="videos" :video="item" :index="index"></Videos>         </div>         <div class="info_wrap">           <info-bar></info-bar>         </div>         <div class="rightbar_wrap">            <right-bar @changeCom="showComOrclose"></right-bar>         </div>       </swiper-slide>       <div class="swiper-pagination" slot="pagination"></div>     </swiper>     <!-- 实现评论 -->     <!-- <transition name="up"> -->       <!-- <div class="comment-wrap" v-if="showComment"> -->         <div class="comment-list">           <div class="comment-top">             <div class="number">15W条评论</div>             <div class="close" ><span class="iconfont icon-guanbi" style="font-weight: bold;font-size: 13px"></span></div>           </div>           <div class="comment-body">             <div class="comment-box" v-for=" i in 20" :key="i">               <div class="comment-item">                 <img class="user-pic" src="~assets/img/avatar.png" alt="">                 <div class="item-info">                   <div class="replay">                     <p class="name">前端切图仔</p>                     <p class="replay-des">                       今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班</p>                     <p class="time">03-19</p>                   </div>                   <div class="zan">                   <span class="iconfont icon-xinaixin-fuben" style="text-align: center">                     <p>10</p>                   </span>                   </div>                 </div>               </div>               <div class="sub-comment-item">                 <img class="user-pic" src="../../../assets/img/avatar.png" alt="">                 <div class="item-info">                   <div class="replay">                     <p class="name">啦啦啦</p>                     <p class="reply-name">不加班不加班</p>                     <p class="time">03-19</p>                   </div>                   <div class="zan">                     <span class="iconfont icon-xinaixin-fuben" style="text-align: center"><p>20</p></span>                   </div>                 </div>               </div>               <div class="more">展开60条回复</div>             </div>           </div>           <div class="reply-input">             <input type="text" placeholder="有爱评论,说点好听的~">             <span class="emoji">@</span>             <span class="iconfont icon-emoji"></span>           </div>         </div>       <!-- </div> -->     <!-- </transition> -->   </div> </template>  <script> import Videos from './Videos'; import InfoBar from '../index/InfoBar'; import RightBar from '../index/RightBar';  export default {   name: 'VideoList',   components: {     RightBar,     InfoBar,     Videos,   },   data() {     return {       // showComment: false, // 展示评论框       swiperOptions: {         direction: 'vertical',         grabCursor: true,         setWrapperSize: true,         autoHeight: true,         slidesPerView: 1,         mousewheel: true,         mousewheelControl: true,         height: window.innerHeight, // 因为抖音视频的高度是占满整个屏幕的高度         resistanceRatio: 0,         observeParents: true,         on: { //  tap 方法是swiper组件提供的点击方法           tap: (e) => {             this.playAction(this.page - 1); //           },           slidePrevTransitionStart: () => { // 上滑 当屏幕向上滑动时             if (this.page > 1) {               this.page -= 1;               this.preVideo(this.page - 1);             }           },           slideNextTransitionStart: () => { // 下滑动 当屏幕向下滑动时             this.page += 1;             this.nextVideo(this.page - 1);           },         },       },       dataList: [         {           id: '1',           url: 'http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4',         },         {           id: '2',           url: 'http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4',         },         {           id: '3',           url: 'http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4',         },         {           id: '4',           url: 'http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4',         },       ],       page: 1, // 用于标识翻页     };   },    methods: {     playAction(index) { // 入参的作用是 需要知道 当前屏幕上显示的视频是第几个视频       this.$refs.videos[index].playOrStop(); // 调用video组件你的playOrStop 方法     },     // 向前     preVideo(index) {       this.$refs.videos[index].play();       this.$refs.videos[index + 1].stop();     },      // 向后     nextVideo(index) {       this.$refs.videos[index].play();       this.$refs.videos[index - 1].stop();     },     // // 弹出评论列表或者关闭评论列表     // showComOrclose() {     //   this.showComment = !this.showComment;     // },   },  }; </script>  <style lang="less" scoped>   .video-list {     /*height: 100%;*/      /deep/ .swiper-container {       /*height: 100%;*/       /*display: flex;*/       position: relative;       .swiper-slide {         /*height: 100%;*/         /*display: flex;*/         /*justify-content: center;*/         /*align-items: center;*/       }     }      .info_wrap {       position: absolute;       left: 0;       bottom: 55px;     }      .rightbar_wrap {       position: absolute;       box-sizing: border-box;       right: 0;       bottom: 30px;       padding-top: 10px;     }      .comment-wrap {       position: fixed;       left: 0;       bottom: 0;       height: 500px;       width: 100%;       border-top-left-radius: 15px;       border-top-right-radius: 15px;       z-index: 999;       padding: 10px;       background-color: #F8F8FF;       box-sizing: border-box;        .comment-box {         padding-bottom: 10px;       }        .comment-top {         display: flex;         align-items: center;         font-weight: bold;         font-size: 16px;          .number {           flex: 1;            text-align: center;         }          .close {           padding-right: 5px;           color: #666;         }       }        .comment-body {         max-height: 400px;         overflow: auto;         margin-top: 15px;          .comment-item {           display: flex;         }          .sub-comment-item {           display: flex;           margin-left: 33px;           margin-top: 10px;            .re-name {             padding: 0 10px;             color: #686868;           }         }          .user-pic {           width: 33px;           height: 33px;           border-radius: 50%;         }          .item-info {           margin-left: 10px;           display: flex;           flex: 1 auto;            .replay {             width: 90%;           }           .replay-des {             padding: 5px;           }           .replay-des, .reply-name {             font-size: 14px;             line-height: 20px;           }            .name {             color: #686868;             font-size: 13px;           }            .time {             color: #686868;           }            .zan {             color: rgb(205, 205, 205);             display: flex;              .icon-xinaixin-fuben {               font-size: 20px;             }              p {               font-size: 15px;             }           }         }          .more {           margin-left: 30px;         }       }        .reply-input {         width: 100%;         height: 50px;         border-top: 1px solid #d9d9d9;         position: absolute;         bottom: 0;         left: 0;         align-items: center;         display: flex;         background-color: #fff;          input {           line-height: 40px;           width: 70%;           padding: 0 10px;         }          input:focus {           border: none;         }          .emoji {           margin: 0 10px;         }          .emoji, .iconfont {           font-size: 30px;           color: #686868;         }        }      }    //     /* 评论 */   // .up-enter-active, .up-leave-active {   //   transition: all .5s;   // }   // .up-enter, .up-leave-to /* .fade-leave-active below version 2.1.8 */ {   //   opacity: 1;   //   transform: translateY(100%);   // }   }  </style>

4.2:评论列表弹出动画

  • videoList.vue
    “` javascritp

仓库传送门

本节包含如下内容:

  • 1.前端冒泡事件
  • 2.vue冒泡事件处理
  • 3.vue transition动画实现
  • 4.视频评论列表实现

最终实现效果

vue实战 实现视频类webapp:(十二) 视频评论列表

1.前端冒泡事件

什么是冒泡和阻止冒泡的原因和方法

1 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生。
当事件发生后,这个事件就要开始传播。为什么要传播呢?因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件)。
当事件在传播过程中,找到了一个能够处理它的函数,这时候我们就说这个函数捕捉到了这个事件。
说到这里,关键的问题来了,那就是一个函数是如何捕捉一个事件的呢?这就涉及到事件的冒泡了

2.Vue如何处理冒泡事件

  • .prevent 阻止父元素的事件
  • stop 阻止事件冒泡

3.vue transition动画实现

transition:官方链接地址
系统介绍:transition

vue的内置组件,可以给任意元素包裹并且添加离开进入的动画效果,官方文档已经介绍的很详细了,这里就简单举个例子
在routerView中用transition包裹,实现页面切换动画效果

<transition name="fade-transform" mode="out-in">     <router-view></router-view> </transition>
/* fade-transform */ .fade-transform-leave-active, .fade-transform-enter-active {   transition: all .5s; }  .fade-transform-enter {   opacity: 0;   transform: translateX(-30px); }  .fade-transform-leave-to {   opacity: 0;   transform: translateX(30px); }

4.视频评论列表实现

4.1:实现评论列表

  • videoList.vue 代码如下
<template>   <div class="video-list">     <swiper :options="swiperOptions">       <swiper-slide v-for="(item, index) in dataList" :key="index">         <div>           <Videos ref="videos" :video="item" :index="index"></Videos>         </div>         <div class="info_wrap">           <info-bar></info-bar>         </div>         <div class="rightbar_wrap">            <right-bar @changeCom="showComOrclose"></right-bar>         </div>       </swiper-slide>       <div class="swiper-pagination" slot="pagination"></div>     </swiper>     <!-- 实现评论 -->     <!-- <transition name="up"> -->       <!-- <div class="comment-wrap" v-if="showComment"> -->         <div class="comment-list">           <div class="comment-top">             <div class="number">15W条评论</div>             <div class="close" ><span class="iconfont icon-guanbi" style="font-weight: bold;font-size: 13px"></span></div>           </div>           <div class="comment-body">             <div class="comment-box" v-for=" i in 20" :key="i">               <div class="comment-item">                 <img class="user-pic" src="~assets/img/avatar.png" alt="">                 <div class="item-info">                   <div class="replay">                     <p class="name">前端切图仔</p>                     <p class="replay-des">                       今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班</p>                     <p class="time">03-19</p>                   </div>                   <div class="zan">                   <span class="iconfont icon-xinaixin-fuben" style="text-align: center">                     <p>10</p>                   </span>                   </div>                 </div>               </div>               <div class="sub-comment-item">                 <img class="user-pic" src="../../../assets/img/avatar.png" alt="">                 <div class="item-info">                   <div class="replay">                     <p class="name">啦啦啦</p>                     <p class="reply-name">不加班不加班</p>                     <p class="time">03-19</p>                   </div>                   <div class="zan">                     <span class="iconfont icon-xinaixin-fuben" style="text-align: center"><p>20</p></span>                   </div>                 </div>               </div>               <div class="more">展开60条回复</div>             </div>           </div>           <div class="reply-input">             <input type="text" placeholder="有爱评论,说点好听的~">             <span class="emoji">@</span>             <span class="iconfont icon-emoji"></span>           </div>         </div>       <!-- </div> -->     <!-- </transition> -->   </div> </template>  <script> import Videos from './Videos'; import InfoBar from '../index/InfoBar'; import RightBar from '../index/RightBar';  export default {   name: 'VideoList',   components: {     RightBar,     InfoBar,     Videos,   },   data() {     return {       // showComment: false, // 展示评论框       swiperOptions: {         direction: 'vertical',         grabCursor: true,         setWrapperSize: true,         autoHeight: true,         slidesPerView: 1,         mousewheel: true,         mousewheelControl: true,         height: window.innerHeight, // 因为抖音视频的高度是占满整个屏幕的高度         resistanceRatio: 0,         observeParents: true,         on: { //  tap 方法是swiper组件提供的点击方法           tap: (e) => {             this.playAction(this.page - 1); //           },           slidePrevTransitionStart: () => { // 上滑 当屏幕向上滑动时             if (this.page > 1) {               this.page -= 1;               this.preVideo(this.page - 1);             }           },           slideNextTransitionStart: () => { // 下滑动 当屏幕向下滑动时             this.page += 1;             this.nextVideo(this.page - 1);           },         },       },       dataList: [         {           id: '1',           url: 'http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4',         },         {           id: '2',           url: 'http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4',         },         {           id: '3',           url: 'http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4',         },         {           id: '4',           url: 'http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4',         },       ],       page: 1, // 用于标识翻页     };   },    methods: {     playAction(index) { // 入参的作用是 需要知道 当前屏幕上显示的视频是第几个视频       this.$refs.videos[index].playOrStop(); // 调用video组件你的playOrStop 方法     },     // 向前     preVideo(index) {       this.$refs.videos[index].play();       this.$refs.videos[index + 1].stop();     },      // 向后     nextVideo(index) {       this.$refs.videos[index].play();       this.$refs.videos[index - 1].stop();     },     // // 弹出评论列表或者关闭评论列表     // showComOrclose() {     //   this.showComment = !this.showComment;     // },   },  }; </script>  <style lang="less" scoped>   .video-list {     /*height: 100%;*/      /deep/ .swiper-container {       /*height: 100%;*/       /*display: flex;*/       position: relative;       .swiper-slide {         /*height: 100%;*/         /*display: flex;*/         /*justify-content: center;*/         /*align-items: center;*/       }     }      .info_wrap {       position: absolute;       left: 0;       bottom: 55px;     }      .rightbar_wrap {       position: absolute;       box-sizing: border-box;       right: 0;       bottom: 30px;       padding-top: 10px;     }      .comment-wrap {       position: fixed;       left: 0;       bottom: 0;       height: 500px;       width: 100%;       border-top-left-radius: 15px;       border-top-right-radius: 15px;       z-index: 999;       padding: 10px;       background-color: #F8F8FF;       box-sizing: border-box;        .comment-box {         padding-bottom: 10px;       }        .comment-top {         display: flex;         align-items: center;         font-weight: bold;         font-size: 16px;          .number {           flex: 1;            text-align: center;         }          .close {           padding-right: 5px;           color: #666;         }       }        .comment-body {         max-height: 400px;         overflow: auto;         margin-top: 15px;          .comment-item {           display: flex;         }          .sub-comment-item {           display: flex;           margin-left: 33px;           margin-top: 10px;            .re-name {             padding: 0 10px;             color: #686868;           }         }          .user-pic {           width: 33px;           height: 33px;           border-radius: 50%;         }          .item-info {           margin-left: 10px;           display: flex;           flex: 1 auto;            .replay {             width: 90%;           }           .replay-des {             padding: 5px;           }           .replay-des, .reply-name {             font-size: 14px;             line-height: 20px;           }            .name {             color: #686868;             font-size: 13px;           }            .time {             color: #686868;           }            .zan {             color: rgb(205, 205, 205);             display: flex;              .icon-xinaixin-fuben {               font-size: 20px;             }              p {               font-size: 15px;             }           }         }          .more {           margin-left: 30px;         }       }        .reply-input {         width: 100%;         height: 50px;         border-top: 1px solid #d9d9d9;         position: absolute;         bottom: 0;         left: 0;         align-items: center;         display: flex;         background-color: #fff;          input {           line-height: 40px;           width: 70%;           padding: 0 10px;         }          input:focus {           border: none;         }          .emoji {           margin: 0 10px;         }          .emoji, .iconfont {           font-size: 30px;           color: #686868;         }        }      }    //     /* 评论 */   // .up-enter-active, .up-leave-active {   //   transition: all .5s;   // }   // .up-enter, .up-leave-to /* .fade-leave-active below version 2.1.8 */ {   //   opacity: 1;   //   transform: translateY(100%);   // }   }  </style>

4.2:评论列表弹出动画

  • videoList.vue
    “` javascritp

仓库传送门

本节包含如下内容:

  • 1.前端冒泡事件
  • 2.vue冒泡事件处理
  • 3.vue transition动画实现
  • 4.视频评论列表实现

最终实现效果

vue实战 实现视频类webapp:(十二) 视频评论列表

1.前端冒泡事件

什么是冒泡和阻止冒泡的原因和方法

1 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生。
当事件发生后,这个事件就要开始传播。为什么要传播呢?因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件)。
当事件在传播过程中,找到了一个能够处理它的函数,这时候我们就说这个函数捕捉到了这个事件。
说到这里,关键的问题来了,那就是一个函数是如何捕捉一个事件的呢?这就涉及到事件的冒泡了

2.Vue如何处理冒泡事件

  • .prevent 阻止父元素的事件
  • stop 阻止事件冒泡

3.vue transition动画实现

transition:官方链接地址
系统介绍:transition

vue的内置组件,可以给任意元素包裹并且添加离开进入的动画效果,官方文档已经介绍的很详细了,这里就简单举个例子
在routerView中用transition包裹,实现页面切换动画效果

<transition name="fade-transform" mode="out-in">     <router-view></router-view> </transition>
/* fade-transform */ .fade-transform-leave-active, .fade-transform-enter-active {   transition: all .5s; }  .fade-transform-enter {   opacity: 0;   transform: translateX(-30px); }  .fade-transform-leave-to {   opacity: 0;   transform: translateX(30px); }

4.视频评论列表实现

4.1:实现评论列表

  • videoList.vue 代码如下
<template>   <div class="video-list">     <swiper :options="swiperOptions">       <swiper-slide v-for="(item, index) in dataList" :key="index">         <div>           <Videos ref="videos" :video="item" :index="index"></Videos>         </div>         <div class="info_wrap">           <info-bar></info-bar>         </div>         <div class="rightbar_wrap">            <right-bar @changeCom="showComOrclose"></right-bar>         </div>       </swiper-slide>       <div class="swiper-pagination" slot="pagination"></div>     </swiper>     <!-- 实现评论 -->     <!-- <transition name="up"> -->       <!-- <div class="comment-wrap" v-if="showComment"> -->         <div class="comment-list">           <div class="comment-top">             <div class="number">15W条评论</div>             <div class="close" ><span class="iconfont icon-guanbi" style="font-weight: bold;font-size: 13px"></span></div>           </div>           <div class="comment-body">             <div class="comment-box" v-for=" i in 20" :key="i">               <div class="comment-item">                 <img class="user-pic" src="~assets/img/avatar.png" alt="">                 <div class="item-info">                   <div class="replay">                     <p class="name">前端切图仔</p>                     <p class="replay-des">                       今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班今晚不要加班</p>                     <p class="time">03-19</p>                   </div>                   <div class="zan">                   <span class="iconfont icon-xinaixin-fuben" style="text-align: center">                     <p>10</p>                   </span>                   </div>                 </div>               </div>               <div class="sub-comment-item">                 <img class="user-pic" src="../../../assets/img/avatar.png" alt="">                 <div class="item-info">                   <div class="replay">                     <p class="name">啦啦啦</p>                     <p class="reply-name">不加班不加班</p>                     <p class="time">03-19</p>                   </div>                   <div class="zan">                     <span class="iconfont icon-xinaixin-fuben" style="text-align: center"><p>20</p></span>                   </div>                 </div>               </div>               <div class="more">展开60条回复</div>             </div>           </div>           <div class="reply-input">             <input type="text" placeholder="有爱评论,说点好听的~">             <span class="emoji">@</span>             <span class="iconfont icon-emoji"></span>           </div>         </div>       <!-- </div> -->     <!-- </transition> -->   </div> </template>  <script> import Videos from './Videos'; import InfoBar from '../index/InfoBar'; import RightBar from '../index/RightBar';  export default {   name: 'VideoList',   components: {     RightBar,     InfoBar,     Videos,   },   data() {     return {       // showComment: false, // 展示评论框       swiperOptions: {         direction: 'vertical',         grabCursor: true,         setWrapperSize: true,         autoHeight: true,         slidesPerView: 1,         mousewheel: true,         mousewheelControl: true,         height: window.innerHeight, // 因为抖音视频的高度是占满整个屏幕的高度         resistanceRatio: 0,         observeParents: true,         on: { //  tap 方法是swiper组件提供的点击方法           tap: (e) => {             this.playAction(this.page - 1); //           },           slidePrevTransitionStart: () => { // 上滑 当屏幕向上滑动时             if (this.page > 1) {               this.page -= 1;               this.preVideo(this.page - 1);             }           },           slideNextTransitionStart: () => { // 下滑动 当屏幕向下滑动时             this.page += 1;             this.nextVideo(this.page - 1);           },         },       },       dataList: [         {           id: '1',           url: 'http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4',         },         {           id: '2',           url: 'http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4',         },         {           id: '3',           url: 'http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4',         },         {           id: '4',           url: 'http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4',         },       ],       page: 1, // 用于标识翻页     };   },    methods: {     playAction(index) { // 入参的作用是 需要知道 当前屏幕上显示的视频是第几个视频       this.$refs.videos[index].playOrStop(); // 调用video组件你的playOrStop 方法     },     // 向前     preVideo(index) {       this.$refs.videos[index].play();       this.$refs.videos[index + 1].stop();     },      // 向后     nextVideo(index) {       this.$refs.videos[index].play();       this.$refs.videos[index - 1].stop();     },     // // 弹出评论列表或者关闭评论列表     // showComOrclose() {     //   this.showComment = !this.showComment;     // },   },  }; </script>  <style lang="less" scoped>   .video-list {     /*height: 100%;*/      /deep/ .swiper-container {       /*height: 100%;*/       /*display: flex;*/       position: relative;       .swiper-slide {         /*height: 100%;*/         /*display: flex;*/         /*justify-content: center;*/         /*align-items: center;*/       }     }      .info_wrap {       position: absolute;       left: 0;       bottom: 55px;     }      .rightbar_wrap {       position: absolute;       box-sizing: border-box;       right: 0;       bottom: 30px;       padding-top: 10px;     }      .comment-wrap {       position: fixed;       left: 0;       bottom: 0;       height: 500px;       width: 100%;       border-top-left-radius: 15px;       border-top-right-radius: 15px;       z-index: 999;       padding: 10px;       background-color: #F8F8FF;       box-sizing: border-box;        .comment-box {         padding-bottom: 10px;       }        .comment-top {         display: flex;         align-items: center;         font-weight: bold;         font-size: 16px;          .number {           flex: 1;            text-align: center;         }          .close {           padding-right: 5px;           color: #666;         }       }        .comment-body {         max-height: 400px;         overflow: auto;         margin-top: 15px;          .comment-item {           display: flex;         }          .sub-comment-item {           display: flex;           margin-left: 33px;           margin-top: 10px;            .re-name {             padding: 0 10px;             color: #686868;           }         }          .user-pic {           width: 33px;           height: 33px;           border-radius: 50%;         }          .item-info {           margin-left: 10px;           display: flex;           flex: 1 auto;            .replay {             width: 90%;           }           .replay-des {             padding: 5px;           }           .replay-des, .reply-name {             font-size: 14px;             line-height: 20px;           }            .name {             color: #686868;             font-size: 13px;           }            .time {             color: #686868;           }            .zan {             color: rgb(205, 205, 205);             display: flex;              .icon-xinaixin-fuben {               font-size: 20px;             }              p {               font-size: 15px;             }           }         }          .more {           margin-left: 30px;         }       }        .reply-input {         width: 100%;         height: 50px;         border-top: 1px solid #d9d9d9;         position: absolute;         bottom: 0;         left: 0;         align-items: center;         display: flex;         background-color: #fff;          input {           line-height: 40px;           width: 70%;           padding: 0 10px;         }          input:focus {           border: none;         }          .emoji {           margin: 0 10px;         }          .emoji, .iconfont {           font-size: 30px;           color: #686868;         }        }      }    //     /* 评论 */   // .up-enter-active, .up-leave-active {   //   transition: all .5s;   // }   // .up-enter, .up-leave-to /* .fade-leave-active below version 2.1.8 */ {   //   opacity: 1;   //   transform: translateY(100%);   // }   }  </style>

4.2:评论列表弹出动画

  • videoList.vue
    “` javascritp

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » vue实战 实现视频类webapp:(十二) 视频评论列表求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们