简介及使用教程
vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求。目前支持上下左右无缝滚动,单步滚动,以及支持水平方向的手动切换功能
安装
Npm
npm install vue-seamless-scroll --save
Yarn
yarn add vue-seamless-scroll
浏览器CDN
https://cdn.jsdelivr.net/npm/vue-seamless-scroll@latest/dist/vue-seamless-scroll.min.js
使用
全局注册
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
//或者
//Vue.use(scroll,{componentName: 'scroll-seamless'})
局部注册
import vueSeamless from 'vue-seamless-scroll'
export default {
components: {
vueSeamless
}
}
简单使用
<div id="app">
<vue-seamless-scroll></vue-seamless-scroll>
</div>
配置项
key | description | default | val |
---|---|---|---|
step |
数值越大速度滚动越快 | 1 |
Number |
limitMoveNum |
开启无缝滚动的数据量 | 5 |
Number |
hoverStop |
是否启用鼠标hover控制 | true |
Boolean |
direction |
方向 0 往下 1 往上 2向左 3向右 | 1 |
Number |
openTouch |
移动端开启touch滑动 | true |
Boolean |
singleHeight |
单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 | 0 |
Number |
singleWidth |
单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 | 0 |
Number |
waitTime |
单步停止等待时间(默认值1000ms) | 1000 |
Number |
switchOffset |
左右切换按钮距离左右边界的边距(px) | 30 |
Number |
autoPlay |
1.1.17版本前手动切换时候需要置为false | true |
Boolean |
switchSingleStep |
手动单步切换step值(px) | 134 |
Number |
switchDelay |
单步切换的动画时间(ms) | 400 |
Number |
switchDisabledClass |
不可以点击状态的switch按钮父元素的类名 | disabled |
String |
isSingleRemUnit |
singleHeight and singleWidth是否开启rem度量 | false |
Boolean |
navigation |
左右方向的滚动是否显示控制器按钮,true的时候autoPlay自动变为false | false |
Boolean |
回调事件
name | description | calback params |
---|---|---|
ScrollEnd |
一次滚动完成的回调事件 | null |
使用源码
<!-- * @Author: Songjq * @Date: 2022-02-18 10:26:29 * @Desscription: --> <template> <div class="d-flex jc-between" id="bottomSlide" > <vue-seamless-scroll :data="listData" :class-option="defaultOption" id="scoll" > <ul class="d-flex"> <li v-for="(item, index) in listData" :key='index' > {{item.title}} </li> <!-- <li>华南区域:空店店铺12、撤店店铺14、临时店铺20</li> <li>华南区域:空店店铺12、调店店铺12</li> <li>华南区域:空店店铺12、撤店店铺14、临时店铺20、调店店铺12</li> --> </ul> </vue-seamless-scroll> </div> </template> <script> // 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等) // 例如:import 《组件名称》 from '《组件路径》'; // 例如:import uploadFile from '@/components/uploadFile/uploadFile' import vueSeamlessScroll from "vue-seamless-scroll"; export default { // import引入的组件需要注入到对象中才能使用 components: { vueSeamlessScroll, }, data() { // 这里存放数据 return { listData: [], }; }, // 监听属性 类似于data概念 computed: { defaultOption() { return { step: 0.2, // 数值越大速度滚动越快 limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length hoverStop: true, // 是否开启鼠标悬停stop direction: 2, // 0向下 1向上 2向左 3向右 openWatch: true, // 开启数据实时监控刷新dom singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 waitTime: 1000, // 单步运动停止的时间(默认值1000ms) openTouch: true, // 开启拖动 }; }, }, // 方法集合 methods: {}, // 监控data中的数据变化 watch: {}, // 生命周期 - 创建完成(可以访问当前this实例) created() {}, // 生命周期 - 挂载完成(可以访问DOM元素) mounted() { for (let i = 0; i < 5; i++) { let j = { title: "华南区域:空店店铺12、撤店店铺14、临时店铺20" + i, }; this.listData.push(j); } }, }; </script> <style lang="scss" scoped> $box-height: 530px; $box-width: 100%; #bottomSlide { width: 100%; height: 40px; overflow: hidden; ul { width: 100%; li { height: 36px; background: linear-gradient(90deg, #0c4c99 0%, #0b0f39 100%); border-radius: 36px 0px 20px 0px; opacity: 0.79; line-height: 36px; padding: 0 28px; font-size: 14px; } } } </style>