记一次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