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>
相关推荐
普郎特29 分钟前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript
可观测性用观测云38 分钟前
前端错误可观测最佳实践
前端
恋猫de小郭39 分钟前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
一枚前端小能手1 小时前
「周更第3期」实用JS库推荐:Lodash
前端·javascript
艾小码1 小时前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
Cyan_RA91 小时前
计算机网络面试题 — TCP连接如何确保可靠性?
前端·后端·面试
谢尔登1 小时前
【CSS】层叠上下文和z-index
前端·css
鹏多多1 小时前
前端复制功能的高效解决方案:copy-to-clipboard详解
前端·javascript
AryaNimbus1 小时前
你不知道的 Cursor系列(三):再也不用死记硬背 Linux 命令,终端 Cmd+K 来帮你!
前端·ai编程·cursor
uhakadotcom1 小时前
Rollup 从0到1:TypeScript打包完全指南
前端·javascript·面试