vue + es6+ less 水平垂直滚动插件
* 采用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 | 滚动至尾部是否展示阴影效果（仅对水平滑动有效） |
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
