移动端水平垂直滚动公用组件 （for vue)

* 采用quadratic 、circular 、back等缓动算法，是一款移动端轻量级滚动插件。

* 支持功能：
    1. 水平、垂直滚动（默认是水平滚动horizontal）
    2. 滚动元素定位到某一项（居左，居中，居右，居上、居下）
    3. 滚动至尾部回弹阴影效果
    4. 滚动时回调
    5. 滚动完成回调 （支持列表头部和列表尾部滚动完成的回调）
    6. 滚动超出边界时回调
    7. 滚动回归边界内部时回调
    8. 注册自定义事件监听
    9. 是否全局需要阻止默认滚动

install

github: https://github.com/ppya0812/scroll-vue-component

使用示例

// xxx.vue
<template>
    <div class="XXX">
        <scroll :scrollToEle="scrollToEle" :moreShadow="moreShadow" :afterRelease="afterRelease" :beforeRelease="beforeRelease">
            <div class="category-inner">
                <div v-for="(v, i) in category" :key="v.id" @click="activeIndex" :class="['category-item', { active: v.id === activedCategory }]">
                    {{ v.name }}
                </div>
            </div>
        </scroll>
    </div>
</template>
<script>
    // * 引入
    import Scroll from 'xxx/components/Scroll';
    data() {
        return {
            scrollToEle: undefined,
            moreShadow: true, // 滚动至尾部是否展示阴影效果（仅对水平滑动有效）
            scrollDirection: 'horizontal' // (horizontal/vertical, 默认horizontal)
        };
    },
    components: {
        Scroll
    },
    methods: {
        scrollToActivedElement() {
            // 确保激活的分类在可视区域
            Vue.nextTick(() => {
                this.scrollToEle = this.$el.querySelector('.active');
            });
        },
        afterRelease() {
            console.log('afterRelease');
            // TODO: afterRelease
        },
        beforeRelease() {
            console.log('beforeRelease');
            // TODO: beforeRelease
        }
    }
</script>

支持功能(API -- props参数):

name | type | default | description --------------- | -------------: | :--------: | :--------------------------------------------------------: scrollDirection | string | horizontal | 滚动方向(horizontal/vertical) refreshStatus |Boolean, Number | | 重新更新实例化组件 destoryStatus | Boolean | | 判断是否全局需要阻止组件滚动 registerEventName | String | | 注册自定义事件监听(translate触发) scrollToEle | HTMLDivElement | undefined | 滚动列表特定元素的domevent(activeEvent： '') scrollToPoint | Number | undefined | 指定元素滚动到指定位置 activeTargetPos | String | center | 所传入的滚动DOM的位置(水平滚动center/left/right, 垂直滚动center/top/bottom) moveCallback | Function | i => 0 | 滚动过程中的回调函数 moveEndback | Function | i => 0 | 滚动过程中的回调函数 afterRelease | Function | i => 0 | 列表尾部滚动完成释放touch的回调函数 beforeRelease | Function | i => 0 | 列表头部滚动完成释放touch的回调函数 beyondFn | Function | i => 0 | 滚动时超出更多时回调 cancelBeyondFn | Function | i => 0 | 滚动时取消超出更多时回调 moreShadow | Boolean | false | 滚动至尾部是否展示阴影效果（仅对水平滑动有效）