记一次vue-slidepage全屏滚动插件的使用__Vue.js
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
前言
数据可视化项目有两个主要页面,需要快速便捷的上下切换两个页面
安装
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
版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: lirioing 原文链接:https://juejin.im/post/6867904943434432520