VUE 实现公告无缝循环滚动

功能说明：

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

原文地址：https://blog.csdn.net/u012015434/article/details/143777436

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！