记一次vue-slidepage全屏滚动插件的使用__Vue.js
发布于 4 年前 作者 banyungong 3670 次浏览 来自 分享
粉丝福利 : 关注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

回到顶部