厦门 网站备案做最漂亮的网站

vue大屏-列表自动滚动vue-seamless-scroll

vue-seamless-scroll的官方文档地址：https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/

具体效果可到官方文档那里查看。

1、下载依赖

npm install vue-seamless-scroll --save

2、使用例子

<template><div class='wrapper'><vue-seamless-scroll:data="listData" // 注意这里的listData要和下面的保持一致:class-option="classOption"class="warp"><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></div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'; // 滚动组件
export default {components: { vueSeamlessScroll },data() {return {listData: []}},computed:{classOption() {return {step: 0.5, // 数值越大速度滚动越快hoverStop: true, // 是否开启鼠标悬停stoplimitMoveNum: 4, // 开始滚动的数据量direction: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 4000 // 单步运动停止的时间(默认值1000ms)}}},
}
</script>