Skip to content

ppya0812/scroll-vue-component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

* 采用quadratic 、circular 、back等缓动算法,是一款移动端轻量级滚动插件。
* 支持功能:
    1. 水平、垂直滚动(默认是水平滚动horizontal)
    2. 滚动元素定位到某一项(居左,居中,居右,居上、居下)
    3. 滚动至尾部回弹阴影效果
    4. 滚动时回调
    5. 滚动完成回调 (支持列表头部和列表尾部滚动完成的回调)
    6. 滚动超出边界时回调
    7. 滚动回归边界内部时回调
    8. 注册自定义事件监听
    9. 是否全局需要阻止默认滚动

install

NPM

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 滚动至尾部是否展示阴影效果(仅对水平滑动有效)

Releases

No releases published

Packages

No packages published