vue的无缝滚动，使用vue-seamless-scroll插件完成滚动动画

文章目录

• 一、使用步骤
• • 1、npm安装
  • 2、引入
  • 3、使用
• 二、总结

一、使用步骤

1、npm安装

npm install vue-seamless-scroll --save

2、引入

import vueSeamless from 'vue-seamless-scroll'
components:{vueSeamless},

3、使用

我这里用的是vw和vh，你们使用的时候看个人需求是否需要换成px

<template>
	<div style="width: 30vw;height: 34vh;overflow-y: hidden;overflow-x: hidden;">
		<vueSeamless ref="scroll" :data="jfjlList" :class-option="classOption">
           <div class="item1" v-for="(item,index) in jfjlList" :key="index + item.jfsj">
             <div class="item-span">
               <span style="color: #5f749e">缴费时间：</span>
               <span :title="item.jfsj">{{ item.jfsj }}</span>
             </div>
             <div class="item-span">
               <span style="color: #5f749e">缴费单号：</span>
               <span :title="item.jfdh">{{ item.jfdh }}</span>
             </div>
             <div class="item-span">
               <span style="color: #5f749e">缴费基数：</span>
               <span :title="item.jfjs">{{ item.jfjs }}</span>
             </div>
             <div class="item-span">
               <span style="color: #5f749e">缴费金额：</span>
               <span :title="item.jfje">{{ item.jfje }}</span>
             </div>
             <div class="item-span" style="width: 98%;">
               <span style="color: #5f749e">认缴单位：</span>
               <span :title="item.rjdw">{{ item.rjdw }}</span>
             </div>
         </div>
       </vueSeamless>
	</div>
</template>
<script>
import vueSeamless from 'vue-seamless-scroll'
export default {
  components:{vueSeamless},
  data(){
    return{
      //缴费记录
      jfjlList:[],
    }
  },
  computed: {
    /*
    * classOption : 列表滚动配置
    * */
    classOption () {
      return {
        step: 0.3, // 数值越大速度滚动越快
        autoPlay: true, // 自动开始滚动播放
        limitMoveNum: 4, // 开始无缝滚动的数据量  //this.fourDatata.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: 4000, // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  mounted () {
    this.init()
  },
  methods:{
    //初始化，这里用来调用接口获取数据
    async init(){
      //调接口(模拟后端得到的数据)
      let data = {
        //缴费记录(jfsj:缴费时间,jfdh:缴费单号,jfjs:缴费基数,jfje:缴费金额,rjdw:认缴单位)
        jfjlList:[
          {jfsj:'2024-02-12',jfdh:202403984784521001,jfjs:'111',jfje:'456',rjdw:'xxx公司'},
          {jfsj:'2024-02-12',jfdh:202403984784521001,jfjs:'222',jfje:'456',rjdw:'xxx公司'},
          {jfsj:'2024-02-12',jfdh:202403984784521001,jfjs:'333',jfje:'456',rjdw:'xxx公司'},
          {jfsj:'2024-02-12',jfdh:202403984784521001,jfjs:'444',jfje:'456',rjdw:'xxx公司'},
        ],
      }
      this.jfjlList = data.jfjlList
    },
  },
}
</script>
<style scoped lang="less">
	.item1{
        width: 100%;
        height: 9vh;
        margin-top: 1vh;
        border-radius: 0.3vh;
        border: solid 0.1vh rgba(33, 106, 251, 0.2);
        background-image: linear-gradient(0deg, rgba(0, 120, 255, 0.06) 0%, rgba(255, 255, 255, 0.06) 100%);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        .item-span{
          text-align: left;
          width: 48%;
          height: 2vh;
          //background: #41aaee;
          font-size: 1.4vh;
          font-weight: normal;
          font-stretch: normal;
          color: #102246;
          white-space: nowrap; /* 强制文本在一行内显示 */
          overflow: hidden; /* 隐藏溢出的文本 */
          text-overflow: ellipsis; /* 用省略号表示被修剪的文本 */
        }
      }
</style>

二、总结

这个的截图我就没有放了，你们直接代码复制粘贴，然后运行就可以看见效果