vue 无限滚动

安装

npm

npm install vue-seamless-scroll --save

yarn

yarn add vue-seamless-scroll

使用

注册组件

全局注册

// **main.js**

// 1.全局 install

import Vue from 'vue'

import scroll from 'vue-seamless-scroll'

Vue.use(scroll)

局部注册

// vue2

import vueSeamlessScroll from 'vue-seamless-scroll'

// vue3

import vueSeamlessScroll from 'vue-seamless-scroll/src'

export default {

components: {

vueSeamlessScroll

}

}

使用组件

<template>

<vue-seamless-scroll :data="listData" class="warp" :class-option="defaultOption">

<ul class="item">

<li v-for="(item, index) in listData" :key="index">

<span class="title" v-text="item.title"></span>

<span class="date" v-text="item.date"></span>

</li>

</ul>

</vue-seamless-scroll>

</template>

<script>

import vueSeamlessScroll from 'vue-seamless-scroll'

export default {

name: 'Example01Basic',

components: {

vueSeamlessScroll

},

data () {

return {

listData: [{

'title': '无缝滚动第一行无缝滚动第一行',

'date': '2017-12-16'

}, {

'title': '无缝滚动第二行无缝滚动第二行',

'date': '2017-12-16'

}, {

'title': '无缝滚动第三行无缝滚动第三行',

'date': '2017-12-16'

}, {

'title': '无缝滚动第四行无缝滚动第四行',

'date': '2017-12-16'

}, {

'title': '无缝滚动第五行无缝滚动第五行',

'date': '2017-12-16'

}, {

'title': '无缝滚动第六行无缝滚动第六行',

'date': '2017-12-16'

}, {

'title': '无缝滚动第七行无缝滚动第七行',

'date': '2017-12-16'

}, {

'title': '无缝滚动第八行无缝滚动第八行',

'date': '2017-12-16'

}, {

'title': '无缝滚动第九行无缝滚动第九行',

'date': '2017-12-16'

}],

}

},

computed: {

defaultOption() {

return {

step: 0.2, // 数值越大速度滚动越快

limitMoveNum: this.listData.length, // 开始无缝滚动的数据量 this.dataList.length

hoverStop: true, // 是否开启鼠标悬停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)

};

},

},

}

</script>

<style lang="scss" scoped>

.warp {

height: 270px;

width: 360px;

margin: 0 auto;

overflow: hidden;

ul {

list-style: none;

padding: 0;

margin: 0 auto;

li,

a {

display: block;

height: 30px;

line-height: 30px;

display: flex;

justify-content: space-between;

font-size: 15px;

}

}

}

</style>