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>