VUE 实现公告无缝循环滚动

功能说明:

VUE 实现公告无缝向左滚动,当公告的宽度大于当前视图宽度的时候再向左滚动,否则不滚动,当鼠标移入时停止滚动,移开时继续滚动,公告获取后台返回的一个数组,将链接转换为HTML

html 复制代码
<style lang="scss">
.notice{ margin-top:24px; height:50px; overflow: hidden; position: relative;
   .notice-con{  white-space:nowrap; flex:1; height:50px; overflow: hidden; margin-left:10px; box-sizing: border-box;
     ul{ height:50px; line-height:50px; display: inline-block; white-space: nowrap; } 
   }
}
</style>

<template>
<div class="notice">
    <div class="notice-con" id="box1" :scrollLeft="scrollLeft" @mouseenter="noticeStop" @mouseleave="startScroll">            
             <ul id="item1" v-html="noticeText"></ul>
             <ul id="item2" v-html="noticeText" v-if="isScroll"></ul>
   </div>    
</div>

</template>

<script>
import { getNotice } from '@/api/index'
export default {
    data(){
        return{
          noticeList:[],
          timer:null,
          scrollLeft:0,        
          noticeText:'',
          isScroll:false,
        }
    },

    mounted() { 
       this.getNotice();  
    },
    
    methods: {       
        

        startScroll(){
          this.noticeScroll('box1','item1', 20, this.scrollLeft);   
        },

        //获取公告
        getNotice(){
                this.noticeList = [
                  {id:1, content:'公告内容公告内容公告[链接|https://www.baidu.com]内容公告内容公告内容公告内容公告内容'},
                  {id:1, content:'公告内容公告内容公告内容公告内容公告内容公告内容公告内容'},
                  {id:1, content:'公告内容公告内容公告内容公告内容公告内容公告内容公告内容'}   
                ]
                var regex = /\[(.*?)\|(https?:\/\/.*?)\]/g;
                this.noticeList.forEach(res=>{
                    let content = res.content.replace(regex, function(match, text, url) {
                        return '<a href="' + url + '" target="_blank" style="color:#2F80ED; text-decoration: underline;">' + text + '</a>';
                    });
                    this.noticeText += content + ';';
                })             
                this.$nextTick(()=>{
                    var box = document.getElementById('box1');	
                    var ul1 = document.getElementById('item1');
                    this.isScroll = ul1.offsetWidth > box.offsetWidth;
                    if(this.isScroll){ 
                      this.noticeScroll('box1','item1', 20); 
                    }
                })
        },

        //滚动公告
        noticeScroll(box1, item1, time, scrollLeft=0){
            var box = document.getElementById(box1);	
            var ul1 = document.getElementById(item1);          
            if(box==null||ul1==null){ return; }           
            box.scrollLeft = scrollLeft;    
            this.scrollLeft = 0;           
            this.timer = setInterval(()=>{
                if (box.scrollLeft >= ul1.scrollWidth) {
                    box.scrollLeft = 0;
                    this.scrollLeft = 0;
                } else {
                    box.scrollLeft++;
                    this.scrollLeft = box.scrollLeft 
                }                       
            }, time);	
        },

        noticeStop(){
           clearInterval(this.timer);
        },
    },
}
</script>
相关推荐
前端 贾公子12 分钟前
Monorepo + vite 怎么热更新
前端
coding随想21 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB242 小时前
html复习
javascript·microsoft·html