Vue_vue2/vue3无缝滚动效果

vue2：使用 vue-seamless-scroll 插件；vue3：使用 vue3-seamless-scroll 插件

一、安装插件

//vue2
npm install vue-seamless-scroll --save
 
//vue3
npm install vue3-seamless-scroll --save复制

二、全局引入

//vue2
  import scroll from 'vue-seamless-scroll'
  Vue.use(scroll)
 
//vue3  代码多去少补
  import { createApp } from 'vue';
  import App from './App.vue';
  import vue3SeamlessScroll from "vue3-seamless-scroll";
  const app = createApp(App);
  app.use(vue3SeamlessScroll);
  app.mount('#app');复制

三、局部引入

//组件使用三步骤 1、引入 2、注册 3、使用
import vueSeamlessScroll from 'vue-seamless-scroll'      //1、引入
components: {                                            //2、注册
  vueSeamlessScroll
},
<vue-seamless-scroll></vue-seamless-scroll>              //3、使用
 
//vue3 同上 代码多去少补
import { defineComponent } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
export default defineComponent({
      components: {
        Vue3SeamlessScroll
      }
   })
<vue3-seamless-scroll></vue3-seamless-scroll>复制

四、具体使用（vue2）

<template>
  <el-card class="box-card">
    <div class="titleText">已报销金额排行</div>
    <el-divider />
    <div id="plmMainFirst">
      <div class="ranking-title">
        <span class="title1">序号</span>
        <span class="title2">部门</span>
        <span class="title3">姓名</span>
        <span class="title4">实际报销金额(￥/元)</span>
      </div>
      <div class="scroll">
        <vue-seamless-scroll :data="detail" :class-option="defineScroll">
          <div
            v-for="(item, index) in detail"
            :key="index"
            class="item"
            :style="{
              color:
                index == 0
                  ? '#f74b4d'
                  : index == 1
                  ? '#ff940e'
                  : index == 2
                  ? '#1cb142'
                  : '#535353',
            }"
            :class="
              (index % 2 == 0 && !changecolor) ||
              (index % 2 !== 0 && changecolor)
                ? 'bg_color'
                : 'bg_color2'
            "
          >
            <span class="item1">{{ index + 1 }}</span>
            <span class="item2">{{ item.costBeLongDeptName }}</span>
            <span class="item3">{{ item.applyPerson }}</span>
            <span class="item4">{{ item.financialApprovalAmount }}</span>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </el-card>
</template>
 
<script>
export default {
  data() {
    return {
      changecolor: false, //控制背景颜色
    };
  },
  props: {
    detail: {
      type: Array,
      required: true,
    },
  },
  computed: {
    defineScroll() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleHeight: 0,
        // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        singleWidth: 0,
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  mounted() {},
  methods: {},
};
</script>
 
<style lang="scss" scoped>
.box-card {
  width: 100%;
  height: 68vh;
  margin-bottom: 20px;
  .titleText {
    font-size: 20px;
    font-weight: 800;
    margin: 10px 0 0 20px;
    display: inline-block;
  }
  .el-divider--horizontal {
    margin-bottom: 0;
  }
  #plmMainFirst {
    width: 100%;
    height: 52vh;
    .ranking-title {
      background: #1562bc;
      color: #fff;
      font-weight: 700;
      line-height: 44px;
      padding: 0 1.5vh;
      display: flex;
      .title1 {
        flex: 0.8;
        font-size: 15px;
      }
      .title2 {
        flex: 1.6;
        font-size: 15px;
      }
      .title3 {
        flex: 1.4;
        font-size: 15px;
      }
      .title4 {
        flex: 1.4;
        font-size: 15px;
      }
    }
    .scroll {
      height: 84%;
      overflow: hidden;
      .item {
        padding: 1vh 2vh;
        font-size: 15px;
        font-weight: 700;
        display: flex;
        .item1 {
          flex: 0.8;
        }
        .item2 {
          flex: 1.6;
          padding-right: 1vh;
          display: inline-block;
          vertical-align: top;
          width: 70%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
        .item3 {
          flex: 1.4;
        }
        .item4 {
          flex: 1.4;
        }
      }
    }
  }
}
.bg_color {
  background-color: #1563bc09 !important;
}
 
.bg_color2 {
  background-color: #ffffff !important;
}
</style>复制

五、具体使用（vue3）

<template>
  <div class="ranking-title">
    <span class="title1">序号</span>
    <span class="title2">产线名称</span>
    <span class="title3">年产能</span>
    <span class="title4">月产能</span>
    <span class="title5">周产能</span>
  </div>
  <div class="scroll">
    <vue3-seamless-scroll hover-stop="true" :list="listData" :hover="hoverVal" :step="stepVal" :limitScrollNum="4">
      <div v-for="(item, index) in listData" :key="index" class="item">
        <span class="item1">{{ index + 1 }}</span>
        <span class="item2">{{ item.PL_NAME }}</span>
        <span class="item3">{{ item.YQTY }}</span>
        <span class="item3">{{ item.MQTY }}</span>
        <span class="item4">{{ item.WQTY }}</span>
      </div>
    </vue3-seamless-scroll>
  </div>
</template>
 
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
 
const url = ref('http://192.129.12.11:8080/')
const hoverVal = ref<boolean>(true)
const stepVal = ref(0.3)
const listData = ref()
 
const getProductLineData = () => {
  axios.get(url.value + 'mes/orders/capacitys').then(res => {
    listData.value = res.data.data
  })
}
onMounted(() => {
  getProductLineData()
  setInterval(getProductLineData, 300000)
})
</script>
 
<style lang="less" scoped>
.ranking-title {
  background: #1562bc;
  color: #fff;
  line-height: 35px;
  padding: 0 1.5vh;
  margin: 0 0 0 2vh;
  display: flex;
  .title1 {
    flex: 1;
    font-size: 14px;
  }
  .title2 {
    flex: 2.5;
    font-size: 14px;
  }
  .title3 {
    flex: 1.2;
    font-size: 14px;
  }
  .title4 {
    flex: 1.2;
    font-size: 14px;
  }
  .title5 {
    flex: 1;
    font-size: 14px;
  }
}
.scroll {
  margin: 0 0 0 2vh;
  height: 18vh;
  overflow: hidden;
  background-color: rgba(21, 98, 188, 0.2);
  .item {
    padding: 0.8vh 2vh;
    font-size: 14px;
    border-bottom: 1px solid #1562bc;
    display: flex;
    .item1 {
      flex: 0.7;
      color: #f4f4f4;
    }
    .item2 {
      flex: 2.6;
      padding-right: 1vh;
      display: inline-block;
      vertical-align: top;
      width: 70%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      color: #f4f4f4;
    }
    .item3 {
      flex: 1.2;
      display: inline-block;
      vertical-align: top;
      width: 70%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      color: #f4f4f4;
    }
    .item4 {
      flex: 0.8;
      color: #f4f4f4;
    }
  }
}
</style>
复制