技術標籤：Vue

安裝

cnpm install vue-seamless-scroll --save

引入

import vueSeamlessScroll from 'vue-seamless-scroll'
components: { //元件
			vueSeamlessScroll
		},

<template>

	<vue-seamless-scroll :data="CardPartsStatisticsList" class="seamless-warp" :class-option="classOption"
 
>
		<ul>
			<li class="DataList_top" v-for="(item,index) in CardPartsStatisticsList" :key="index" v-if="index < 5">
				<div class="DataList_left">{{index+1}}</div>
				<div class="DataList_left">{{item.itemname}}</
 
div>
				<div class="DataList_left">{{item.number}}</div>
			</li>
		</ul>
	</vue-seamless-scroll>

</template>

<script>
	import vueSeamlessScroll from 'vue-seamless-scroll'
	export default {
		data() {
			return {
				CardPartsStatisticsList: []
			}
 
;
		},
		components: { //元件
			vueSeamlessScroll
		},
		computed: {

			classOption() {
				return {
					step: 0.2, // 數值越大速度滾動越快
					limitMoveNum: 2, // 開始無縫滾動的資料量 this.dataList.length
					hoverStop: false, // 是否開啟滑鼠懸停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)
				}
			}
		},
		created() {
			for (var i = 0; i < 2; i++) {
				this.CardPartsStatisticsList.push({
					itemname: i,
					number: i
				});
			}
		}
	}
</script>


<style>
	.seamless-warp {
		width: 100%;
		height: calc(100% - 16px);
		overflow: hidden;
	}
</style>