vue3-seamless-scroll

一个兼容vue 2.x-3.x 的vue-seamless-scroll区域滚动插件

安装

npm install @zengxiaohui/vue3-seamless-scroll --save

使用

全局安装

// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import vueSeamlessScroll from '@zengxiaohui/vue3-seamless-scroll'
app.use(vueSeamlessScroll)

app.mount('#app')

局部应用

demo

<template>
    <div class="demo demo1">
        <vueSeamlessScroll :class-option="classOption" :data="list" @onChange="onChange">
            <p v-for="(item,index) in list" :key="index" :data-item="item+index">{{item}}</p>
        </vueSeamlessScroll>
    </div>
    <div class="demo demo2">
        <vueSeamlessScroll :class-option="classOption2" :data="list">
            <p v-for="(item,index) in list" :key="index">{{item}}</p>
        </vueSeamlessScroll>
    </div>
</template>

<script>
    import {ref} from "vue";
    import vueSeamlessScroll from '@zengxiaohui/vue3-seamless-scroll'
    export default {
        name: "demo",
        components: {vueSeamlessScroll}
        setup() {
            const list = ref([])
            for (let i = 0; i < 20; i++) {
                list.value.push('人生有很多出其不意的惊喜，比如你会以为我举个栗子')
            }
            const classOption = {
                singleHeight: 21+20, // 元素高度+下边距
                stop: false // 是否开启滚动
            }
            const classOption2 = {
                step: 0.5, // 速度
                hoverStop: true, // 鼠标停止
                direction: 1, // 0 下 1 上 2 左 3 右
            }
            // 点击事件回调 记得绑定:data-item="item+index" 可绑定多个属性
            function onChange(e) {
                console.log(e)
            }
            return {
                classOption,
                classOption2,
                list,
                onChange
            }
        }
    }
</script>

<style scoped lang="scss">
    *{
        margin: 0;
        padding: 0;
    }
    .demo{
        width: 400px;
        height: 300px;
        border: 1px solid darkturquoise;
        overflow: hidden;
        p{
            margin-bottom: 20px;
        }
    }
    .demo2{
        margin-top: 50px;
    }
</style>

参数配置

在vue-seamless-scroll 基础上，增加以下属性：

const option = {
    stop: false // 是否禁止滚动
}

如果想要配置超出容器才开始滚动请结合 limitMoveNum属性了来控制

点击事件回调 @onChange

<vueSeamlessScroll :class-option="classOption" :data="list" @onChange="onChange">
    <p v-for="(item,index) in list" :key="index" :data-item="item+index">
        <span>{{item}}</span>
    </p>
</vueSeamlessScroll>

记得绑定 :data-item="item+index" 可绑定多个属性如果是json请转换成json字符串进行绑定 eg: :data-item="JSON.stringify(item)"

更新日志

2021-09-02 v1.6.0 优化@onChange 点击回调事件获取不正确的bug
2021-09-06 v2.0.0 由于基于seamless 会发生莫名其妙的滚动抖动bug[没找到原因],所以更换成vue-seamless-scroll,根据vue版本会自动加载不同版本组件