前言
数据可视化项目有两个主要页面，需要快速便捷的上下切换两个页面
安装
npm i -S vue-slidepage
引入
import { SlideContainer, SlidePage } from 'vue-slidepage'
使用
- template
<slide-container ref="slideContainer"> <slide-page > <component ></component > </slide-page> <slide-page> <component ></component > </slide-page> </slide-container> - components
components: { SlideContainer, SlidePage }, - methods
this.$refs.slideContainer.slideTo(page);
Options
<slide-container :useWheel="false">
//关闭鼠标滚轮滑动
...
</slide-container>
| name | type | default | description |
|---|---|---|---|
| useAnimation | Boolean | True | 是否开启动画 |
| refresh | Boolean | True | 每次滚动进入是否重新执行动画 |
| useWheel | Boolean | True | 是否开启鼠标滚轮滑动 |
| useSwipe | Boolean | True | 是否开启移动端触控滑动 |
Events
| name | value | description |
|---|---|---|
| slideNext | 无 | 滑动到下一屏 |
| slidePrev | 无 | 滑动到上一屏 |
| slideTo | page | 传入page页码，滑动定位到对应的page |
| slideFile | page | 触发对应 page 的lazy手动动画 |
| destroy | 无 | 销毁当前实例，移除所有事件恢复class属性值。 |
| update | 无 | 当html里的page发生变化时需要执行动态更新。 |
最后
获取更多更详细的内容，请参考源码vue-slidepage
