修改首页横幅通知

src/views/enforceHome.vue

@@ -18,14 +18,22 @@
                 </span>
 
             </div> -->
-            <van-notice-bar
+            <!-- <van-notice-bar
               :text="noticeStr"
               :key="freshMap.key"
               left-icon="volume-o"
               scrollable
               :speed="100"
               class="streamer"
-            />
+            /> -->
+            <div class="noticeContent">
+                  <ul class="notice_list" :class="noticeList.length>1?{notice_top:freshMap.animate}:''">
+                          <li v-for="(item, index) in noticeList" :key="index">
+                            {{item.content}}
+                          </li>
+                  </ul>
+            </div>
+
            
             <!-- <div class="container streamer" id="notification-container":key="freshMap.key">
                 <div class="notification" id="notification">
@@ -88,7 +96,19 @@
         listLoading: false, // 是否加载中
         listFinished: false, // 是否加载完成标识
         key: 0,
+        animate: false
     });
+    const noticeList =  [
+			{
+				content: '苹果也疯狂！iPhone XR来到小米价，刷新售价底线'
+			}, {
+				content: '“5号电池一出”，充电宝没用了，所有手机通用，行千里不关机'
+			}, {
+				content: '小米10一出手就高配置，小米9难及十分之一，友商都汗颜'
+			}, {
+				content: 'iPhone XR2性能曝光，A13处理器+后置双摄'
+			}
+		];
     // 模拟异步数据加载
   //  setTimeout(() => {
      
@@ -250,7 +270,7 @@
         // }, error => {
         // })
         // queryList();
- 
+        setInterval(showNotice, 3000)
     });
     const setNotificationMove =()=>{
       // 清除定时器
@@ -298,6 +318,15 @@
         this.setNotificationMove();
       }
     }
+    const showNotice = () => {
+        freshMap.animate = true
+        setTimeout(() => {
+          noticeList.push(noticeList[0])
+          noticeList.shift()
+          freshMap.animate = false
+        }, 500)
+}
+
 </script>
 
 <style lang="less" scoped>
@@ -623,5 +652,32 @@
         background-size: 100% auto;
       }
     }
+.noticeContent {
+    margin-top: 10px;
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 25px; // 控制高度以达到控制显示条数的目的
+    overflow: hidden;
+    border-top:1px solid #ece6ed;
+    border-bottom:1px solid #ece6ed;
+  }
+  .noticeContent li{
+    text-align: left;
+    line-height: 25px;
+    height: 35px;
+    font-size: 12px;
+    color:red;
+  }
+  .notice_list {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .notice_top {
+    transition: all 0.5s;
+    margin-top: -30px;
+  }
 
 </style>