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>
相关推荐
Bear on Toilet20 小时前
继承类模板:函数未在模板定义上下文中声明,只能通过实例化上下文中参数相关的查找找到
开发语言·javascript·c++·算法·继承
风若飞20 小时前
npm ERR! code CERT_HAS_EXPIRED
前端·npm·node.js
北城笑笑20 小时前
NodeJS 8 ,从 0 到 1:npm 包发布与更新全流程指南( 含多场景适配与踩坑总结 )
前端·npm·node.js·github
Mike_jia20 小时前
如何找回Harbor密码
前端
码码哈哈0.020 小时前
npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚
前端·npm·node.js
浩男孩20 小时前
🍀简简单单结合 hooks 优雅使用弹窗🚀🚀
前端
江城开朗的豌豆20 小时前
Axios拦截器:给你的请求加上"双保险"!
前端·javascript·react.js
晓得迷路了20 小时前
栗子前端技术周刊第 98 期 - NPM 生态遭受攻击、Rspack 1.5.3、Storybook 10 beta...
前端·javascript·css
江城开朗的豌豆20 小时前
解密DVA:React应用的状态管理利器
前端·javascript·react.js
码猿宝宝21 小时前
浏览器中javascript时间线,从加载到执行
开发语言·javascript·ecmascript