1. Install vue-seamless-scroll
npm install vue-seamless-scroll --save
2. Introduce components
<vue-seamless-scroll></vue-seamless-scroll>
import vueSeamlessScroll from 'vue-seamless-scroll'
components: {
vueSeamlessScroll
},
3. Configuration parameters
// The monitoring attribute is similar to the concept of data
computed: {
defaultOption () {
return {
step: 0.2, // The larger the value, the faster the scroll speed
limitMoveNum: 2, // The amount of data to start seamless scrolling this.dataList.length
hoverStop: true, // Whether to enable mouse hover stop
direction: 1, // 0 down 1 up 2 left 3 open to the right
openWatch: true, // enable real-time data monitoring and refresh dom
singleHeight: 0, // single step motion stopped Height (default value 0 is seamless non-stop scrolling) direction => 0/1
singleWidth: 0, // width of single step motion stop (default value 0 is seamless non-stop scrolling) direction => 2/3
waitTime : 1000 // The time when the single step motion stops (default value 1000ms)
}
}
},
4. Complete example code
<!--
文件描述：无缝滚动组件
创建时间：2020/4/10 18:32
创建人：Administrator
-->
<template>
<div class="" style="padding: 50px;">
<div class="page-example3" style="">
<vue-seamless-scroll :data="listData" :class-option="defaultOption" >
<ul class="ul-scoll">
<li v-for="(item, index) in listData" :key='index'>
<span class="title">{{item.title}}：</span><span class="date">{{item.time}}</span>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</template>
<script>
// Other files can be imported here (for example: components, tool js, third-party plug-in js, json files, image files, etc.)
// for example: import "component name" from '"component path"';
// for example: import uploadFile from '@ / components / uploadFile / uploadFile'
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
name: 'Example3',
// Imported components need to be injected into the object to use
components: {
vueSeamlessScroll
},
data () {
// Store data here
return {
listData: []
}
},
// The monitoring attribute is similar to the concept of data
computed: {
defaultOption () {
return {
step: 0.2, // The larger the value, the faster the scrolling speed
limitMoveNum: 2, // The amount of data to start seamless scrolling this.dataList.length
hoverStop: true, // Whether to enable mouse hover stop
direction: 1, // 0 Down 1 up 2 left 3 open to the right
openWatch: true, // enable real-time data monitoring and refresh dom
singleHeight: 0, // the height at which the single-step motion stops (default value 0 is seamless and non-stop scrolling) direction => 0 / 1
singleWidth: 0, // Width of single step motion stop (default value 0 is seamless and non-stop scrolling) direction => 2/3
waitTime: 1000 // time of single step motion stop (default value 1000ms)
}
}
},
// Method collection
methods: {},
// Monitor data changes in data
watch: {},
// Life cycle-creation complete (access to the current this instance)
created () {
},
// Life cycle-completion of mount (access to DOM elements)
mounted () {
for (let i = 0; i <15; i ++) {
let j = {
title: 'Seamlessly scrolling the number of
items ah-' + i, time: '2020-04-10'
}
this.listData.push (j)
}
}
}
</ script>
<style scoped lang = "scss">
// @ import url (); Introduce public css
class.page-example3 {
width: 400px;
height: 200px;
overflow: hidden;
border: 1px solid # 283dff;
.ul-scoll {
li {
margin: 6px;
padding: 5px;
background: rgba(198, 142, 226, 0.4);
}
}
}
</style>
5. Running effect
