一、vue-seamless-scroll是什么？

vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求。目前支持上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能

二、使用步骤

1.引入库

//npmnpm install vue-seamless-scroll --save

2.引入组件

//全局注册import Vue from 'vue'import scroll from 'vue-seamless-scroll'Vue.use(scroll)

//按需引入import VueSeamless"vue-seamless-scroll";export default {components: {VueSeamless,},}

3.渲染页面

<div id="apps" style="height: 300px; overflow: hidden"><VueSeamless:data="cityData":class-option="cityOption"><divclass="scorll-content"v-for="(item) in cityData":key="item.value"><div>{{ item.name }}---Top{{item.value}}</div></div></VueSeamless></div>

<script>import VueSeamless from "vue-seamless-scroll";export default {components: {VueSeamless,},data() {return {cityData: [{name: "北京市", value: "1" },{name: "上海市", value: "2" },{name: "曹县", value: "3" },{name: "深圳市", value: "4" },{name: "广州市", value: "5" },{name: "南京市", value: "6" },{name: "成都市", value: "7" },{name: "郑州市", value: "8" },{name: "天津市", value: "9" },{name: "香港", value: "10" },{name: "武汉市", value: "11" },{name: "西安市", value: "12" },],};},computed: {// 公告滚动自定义cityOption() {return {step: 1, // 数值越大速度滚动越快limitMoveNum: 4, // 开始无缝滚动的数据量 this.cityData.lengthhoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 1000, // 单步运动停止的时间(默认值1000ms)};},},};</script>

完

vue 轮播组件 vue-seamless-scroll简单用法/上下左右无缝滚动 单步滚动 以及支持水平方向的手动切换功能