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

1、下载 npm install vue-seamless-scroll

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

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

3、html代码

 <!-- //公告 -->
    <div class="signupCard" v-if="JsLCData.length > 0">
      <el-card class="box-card">
        <slot name="header" class="clearfix">
          <h2 style="margin-bottom: 10px; color: #267ec5">公告</h2>
        </slot>
        <vue-seamless-scroll
          style="height: 160px; overflow: scroll"
          :data="JsLCData"
          :class-option="defaultOption"
        >
          <div v-for="(item, index) in JsLCData" :key="index" class="cardText">
            <span
              style="font-size: 12px; color: #267ec5; cursor: pointer"
              @click="goSignUp(item.id)"
            >
              {
   
   { item.title }}</span
            >
          </div>
        </vue-seamless-scroll>
      </el-card>
    </div>

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

最后

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