vue的无缝滚动插件vue-seamless-scroll的安装与使用

时间:2023-04-28 22:26:40
vue的无缝滚动插件vue-seamless-scroll的安装与使用

npm安装地址 https://www.npmjs.com/package/vue-seamless-scroll

命令行执行:

npm install vue-seamless-scroll --save

然后在main.js文件里面引入使用:

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

在页面使用参考地址: https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default

里面有详细的参数及代码案例:直接复制到项目里面即可显示:

vue的无缝滚动插件vue-seamless-scroll的安装与使用

遇到的问题:

1. 复制案例的样式:会出现滚动内容不衔接的情况

.seamless-warp {
height: 229px;
overflow: hidden;
}

vue的无缝滚动插件vue-seamless-scroll的安装与使用

2. 然后在上面的css中添加行高就不会出现切断的现象了

vue的无缝滚动插件vue-seamless-scroll的安装与使用