vue使用vue-fullpage知道当前滑动页面在第几页

113 阅读 0 评论 75 点赞

我是靠谱客的博主花痴奇异果，这篇文章主要介绍vue使用vue-fullpage知道当前滑动页面在第几页，现在分享给大家，希望可以做个参考。

data部分
规定回调函数

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  data() {
      return {
        options: {
          afterLoad: this.afterLoad,
       //   这个是回调函数
          verticalCentered: false,
          scrollingSpeed: 500,
          navigation: 'true',
          section: ['#fff', '#fff', '#fff', '#fff', '#fff']
        },
        topShow: false,
       }
    },

methods部分
section滚动会造成body的刷新，同时调用回调函数，其中body上的classname，对应’fp-viewing-0’，‘fp-viewing-1’，‘fp-viewing-2’

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
```methods: {
      //回调函数会随着section滑动调用
      afterLoad() {
        console.log("Emitted 'after load' event.")
        //获取body的classname，跟随section滑动刷新
        let a = document.body.className
        //在第几页控制相关逻辑
        if (a != 'fp-viewing-0') {
          } else {
          }
      },
    }