vue如何實現(xiàn)列表自動滾動、向上滾動的效果(vue-seamless-scroll)

更新時間：2023年05月17日 10:33:51 作者：是小橙鴨丶

這篇文章主要介紹了vue如何實現(xiàn)列表自動滾動、向上滾動的效果(vue-seamless-scroll)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue實現(xiàn)列表自動滾動、向上滾動的效果

研究了一個插件列表自動滾動的插件vue-seamless-scroll

感受這是個做大屏可視化時可靠幫手

請欣賞一下效果圖

如圖所示可以看到它自動向上滾動以及鼠標移動進入表格則停止?jié)L動

這個使用起來也是非常的方便的，接下來我為各位老鐵記錄一下使用的過程

1.第一步進行安裝

npm install vue-seamless-scroll --save

2.在main.js直接導(dǎo)入使用

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

3.建立了一個Test.vue來使用(結(jié)合element-ui中的表格來一起實現(xiàn)的)

<template>
	<div id="app">
	<div class="backround">
		<div class="toptitle">
			<div class="item">日期</div>
			<div class="item">姓名</div>
			<div class="item">地址</div>
		</div>
		<vue-seamless-scroll  :data="listData"  :class-option="optionHover" class="seamless-warp">
			<el-table
			  :data="listData"
			  border
			  :show-header="status"
			  >
			  <el-table-column
				prop="date"
				label="日期"
				>
			  </el-table-column>
			  <el-table-column
				prop="title"
				label="姓名"
				>
			  </el-table-column>
			  <el-table-column	  
				prop="test"
				label="地址"
				>
			  </el-table-column>
			</el-table>
		</vue-seamless-scroll>
	</div>
	</div>
</template>
<script>
    export default {
        data () {
            return {
				status:false,
                listData: [
					{
                   'title': '無縫滾動第一行無縫滾動第一行',
                   'date': '2017-12-16',
				   'test':'測試',
				   'test2':'測試2',
				   'test3':'測試3'
                 },
				 {
                    'title': '無縫滾動第二行無縫滾動第二行',
                    'date': '2017-12-16',
					'test':'測試',
					'test2':'測試2',
					'test3':'測試3'
                 }, 
				 {
                     'title': '無縫滾動第三行無縫滾動第三行',
                     'date': '2017-12-16',
					 'test':'測試',
					 'test2':'測試2',
					 'test3':'測試3'
                 }, 
				 {
                     'title': '無縫滾動第四行無縫滾動第四行',
                     'date': '2017-12-16',
					 'test':'測試',
					 'test2':'測試2',
					 'test3':'測試3'
                 },
				 {
                     'title': '無縫滾動第五行無縫滾動第五行',
                     'date': '2017-12-16',
					 'test':'測試',
					 'test2':'測試2',
					 'test3':'測試3'
                 }, 
				 {
                     'title': '無縫滾動第六行無縫滾動第六行',
                     'date': '2017-12-16',
					 'test':'測試',
					 'test2':'測試2',
					 'test3':'測試3'
                 },
				 {
                     'title': '無縫滾動第七行無縫滾動第七行',
                     'date': '2017-12-16',
					 'test':'測試',
					 'test2':'測試2',
					 'test3':'測試3'
                 }, 
				]
                }
            },
            computed: {
               optionHover() {
				 return {
				   step: 0.5, // 數(shù)值越大速度滾動越快
				   limitMoveNum: 2, // 開始無縫滾動的數(shù)據(jù)量 this.dataList.length
				   hoverStop: true, // 是否開啟鼠標懸停stop
				   direction: 1, // 0向下 1向上 2向左 3向右
				   openWatch: true, // 開啟數(shù)據(jù)實時監(jiān)控刷新dom
				   singleHeight: 0, // 單步運動停止的高度(默認值0是無縫不停止的滾動) direction => 0/1
				   singleWidth: 0, // 單步運動停止的寬度(默認值0是無縫不停止的滾動) direction => 2/3
				   waitTime: 1000, // 單步運動停止的時間(默認值1000ms)
				 };
			   },
             }
 }
</script>

4.若是不嫌棄小弟的樣式丑可以在這里復(fù)制（各位大佬們也可以自己手寫自己帥氣的樣式喲，背景圖自己網(wǎng)上找一張即可）

<style lang="less" scoped>
.backround{
	width: 100%;
	height: 1000px;
	background-image: url("../assets/pageBg.png");
}
/deep/ .el-table, /deep/ .el-table__expanded-cell{
  background-color: transparent;
}
/* 表格內(nèi)背景顏色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
  color:white
}
.seamless-warp{
	height: 200px;
	overflow: hidden;
}
/deep/.el-table .cell{
	text-align: center;
}
/deep/.toptitle{
	width: 100%;
	display: flex;
	background-color: gainsboro;
	margin-bottom: 10px;
	border:2px solid gainsboro;
	background-color: transparent;
	color:white
}
.item{
	width: 33.3%;
	border-right:2px solid gainsboro;
	text-align: center;
}
</style>

重點：若是有不明白的小伙伴，以及想深入學(xué)習(xí)的小伙伴們可以點擊深入學(xué)習(xí) 進入到對應(yīng)的插件演示文檔進行學(xué)習(xí)呀

vue-seamless-scroll(一個簡單的基于vue.js的無縫滾動)

一般在數(shù)據(jù)可視化項目中經(jīng)常會看到無縫滾動的表格，即輪播表，我們可以使用 vue-seamless-scroll 來實現(xiàn)，使用起來也很方便

vue-seamless-scroll官網(wǎng)：vue-seamless-scroll

1. 安裝

NPM

npm install vue-seamless-scroll --save

Yarn

yarn add vue-seamless-scroll

PNPM

pnpm add vue-seamless-scroll

2. 引入組件注冊

import VueSeamlessScroll from "vue-seamless-scroll";
export default {
? components: { VueSeamlessScroll }
}

3. 使用

在實際項目中可能不止一個地方使用輪播表，所以我這里還是將其封裝為單獨一個組件可以復(fù)用，該組件默認都是寬高100% * 100%，給定一個容器引入即可。樣式也是可以隨意調(diào)整的，傳入數(shù)據(jù)和配置項即可。具體配置項（class-option）看https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/properties.html#data

組件封裝

src/components/VueSeamlessScroll/index.vue

<template>
? <div class="vue-seamless-scroll">
? ? <VueSeamlessScroll :data="listData" class="warp" :class-option="classOption">
? ? ? <div class="row" v-for="item in listData" :key="item.id">
? ? ? ? <div>{{ item.title }}</div>
? ? ? ? <div>{{ item.date }}</div>
? ? ? </div>
? ? </VueSeamlessScroll>
? </div>
</template>
<script>
import VueSeamlessScroll from "vue-seamless-scroll";
export default {
? components: { VueSeamlessScroll },
? props: {
? ? listData: {
? ? ? type: Array,
? ? ? default: () => []
? ? },
? ? classOption: {
? ? ? type: Object,
? ? ? default: () => {}
? ? }
? }
};
</script>
<style scoped>
.vue-seamless-scroll {
? width: 100%;
? height: 100%;
? padding: 12px 5px;
? box-sizing: border-box;
}
.warp {
? width: 100%;
? height: 100%;
? overflow: hidden;
}
.row {
? width: 100%;
? display: flex;
? justify-content: space-between;
? margin-bottom: 5px;
}
</style>

組件引入使用

<template>
? <div class="index">
? ? <div class="scroll-table">
? ? ? <!-- 輪播組件 -->
? ? ? <VueSeamlessScroll :listData="listData" :classOption="{ step: 1, limitMoveNum: 5 }" />
? ? </div>?
? </div>
</template>
<script>
import VueSeamlessScroll from '@/components/VueSeamlessScroll'
export default {
? data() {
? ? return {
? ? ? listData: []
? ? }
? },
? components: { VueSeamlessScroll },
? mounted(){
? ? this.getData()
? },
? methods:{
? ? // 獲取輪播數(shù)據(jù)
? ? getData() {
? ? ? setTimeout(() => {
? ? ? ? this.listData = [
? ? ? ? ? {
? ? ? ? ? ? id: 1,
? ? ? ? ? ? title: "無縫滾動第一行無縫滾動第一行",
? ? ? ? ? ? date: "2017-12-16",
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 2,
? ? ? ? ? ? title: "無縫滾動第二行無縫滾動第二行",
? ? ? ? ? ? date: "2017-12-16",
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 3,
? ? ? ? ? ? title: "無縫滾動第三行無縫滾動第三行",
? ? ? ? ? ? date: "2017-12-16",
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 4,
? ? ? ? ? ? title: "無縫滾動第四行無縫滾動第四行",
? ? ? ? ? ? date: "2017-12-16",
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 5,
? ? ? ? ? ? title: "無縫滾動第五行無縫滾動第五行",
? ? ? ? ? ? date: "2017-12-16",
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 6,
? ? ? ? ? ? title: "無縫滾動第六行無縫滾動第六行",
? ? ? ? ? ? date: "2017-12-16",
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 7,
? ? ? ? ? ? title: "無縫滾動第七行無縫滾動第七行",
? ? ? ? ? ? date: "2017-12-16",
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 8,
? ? ? ? ? ? title: "無縫滾動第八行無縫滾動第八行",
? ? ? ? ? ? date: "2017-12-16",
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 9,
? ? ? ? ? ? title: "無縫滾動第九行無縫滾動第九行",
? ? ? ? ? ? date: "2017-12-16",
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? id: 10,
? ? ? ? ? ? title: "無縫滾動第十行無縫滾動第十行",
? ? ? ? ? ? date: "2017-12-16",
? ? ? ? ? },
? ? ? ? ];
? ? ? }, 200);
? ? },
? },
}
</script>
<style scoped>
.index {
? width: 100%;
? height: 100%;
? padding: 20px 0 0 20px;
? box-sizing: border-box;
}
.scroll-table {
? width: 350px;
? height: 300px;
? border: 1px dashed red;
}
</style>