评论滚动

src/components/livedModel/livedAnnouncement.vue

 <template>
   <!-- 公告组件 -->
-  <div class="livedAnnouncement" v-if="isShow">
+  <div class="livedAnnouncement" v-show="isShow">
     <div class="label">
       <span class="label">公告：</span><span class="test">欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间欢迎来到直播间</span>
     </div>
@@ -23,7 +23,7 @@ export default {
     this.isShow=true;
     setTimeout(() => {
       this.isShow=false;
-    }, 5900);
+    }, 7000);
   },
   mounted() {},
   methods: {}
@@ -40,8 +40,8 @@ export default {
   border-radius: 10px;
   padding: 8px;
   margin-bottom: 10px;
-  animation:toLeft 1s linear 5s;
-  opacity: 1;
+  animation:toLeft 5s linear;
+  opacity: 0;
   span{
     font-size: 14px;
     color: #f1f1f1;
@@ -51,8 +51,8 @@ export default {
   }
 }
 @keyframes toLeft {
-  50%{
-    opacity: 0.5;
+  0%{
+    opacity: 1;
   }
   100%{
     opacity: 0;

src/components/livedModel/livedIsMsg.vue

@@ -2,7 +2,7 @@
   <!-- 评论模块 -->
   <div class="livedIsMsg">
     <div class="list">
-      <scroll-view :style="{'height': '24vh','width':'52vw;'}" :scroll-y="true" :scroll-top="scrollTop"  @scrolltolower="scrolltolower">
+      <scroll-view :style="{'height': '24vh','width':'52vw'}" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true"  @scrolltolower="scrolltolower">
         <div class="item flex" v-for="(item,index) in list" :key="index">
           <div class="user">
             <p class="live"></p>