vue实现滚动公告效果vue-seamless-scroll

1、下载 npm install vue-seamless-scroll

2、页面引入 也可以全局引入 我是当前页面用 所以选择页面引入

import vueSeamlessScroll from 'vue-seamless-scroll/src';
  components: {
    vueSeamlessScroll
  },

3、html代码

 
    

      
        
          
公告
        
        
          

            
              {{ item.title }}
          
        
      
    

4、声明的变量

data(){
  return {
 defaultOption: {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      },
      JsLCData: [], //数组
  }
}

js：
// 赛事新闻
    getsignUp(id) {
      let parmas = {
        channelId: id,
        size: 10,
        current: 1,
      };
      this.$API.cms.media.selectContents(parmas)
        .then((res) => {
          if (res.code === 200) {
            this.JsLCData = res.data.records;  //赋值就可以
          }
        })
        .catch((err) => {});
    },

5、css样式

  ///公告
  .signupCard {
    position: fixed;
    right: 10px;
    // top: 25%;
    top: 180px;
    display: flex;
    flex-direction: column;
    z-index: 2000;
    width: 254px;
    border: 1px solid #267ec5;
    border-radius: 4px;
  }

效果如下：https://live.csdn.net/v/308035

最后

感谢阅读，如有不足之处，欢迎在评论区讨论！