Need help with vue-fullpage?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

river-lee
146 Stars 25 Forks MIT License 59 Commits 11 Opened issues

Description

a single page scroll plugin for [email protected] https://river-lee.github.io/vue-fullpage/examples/

Services available

!
?

Need anything else?

Contributors list

fullpage-vue

A sigle-page scroll plugin based on [email protected],support for mobile and PC . 中文版

overview

To achieve sigle-page scroll in mobile, support horizontal scroll and vertical scroll, support all the animation instructions of animate.css.

Online demo

here's a jsfiddle demo Live demo

Installation

npm install fullpage-vue --save

If you want use animate instruction, please install animate.css

npm install animate.css --save
animate.css usage

Document

options

  • start
    : (default:
    0
    ) Display first page
  • duration
    : (default:
    500
    )
  • loop
    : (default:
    false
    )
  • dir
    : (default:
    v
    ) Direction of movement
  • der
    : (default:
    0.1
    )
  • movingFlag
    : (default:
    false
    )
  • beforeChange
    : (default:
    function
    ) Before change callback
  • afterChange
    : (default:
    function
    ) After change callback
  • overflow
    : (default:
    hidden
    ) hidden || scroll || auto
    hidden
    Hidden overflow
    scroll
    Handling the scroll bars of page
    auto
    Handling all scroll bars in page,Start checking from triggered elements
  • disabled
    : (default:
    false
    )

method

moveTo

Move to the specified page

js
  /**
   *
   * @param {Number} moveToIndex Move to index
   * @param {Boolean} animated Animated move?
   * @param {Boolean} force Fore move default:false
   */
  $fullpage.moveTo(1/*move to index*/,false /*animatied*/,true /*force move?*/)

movePrev

Move to the previous page

moveNext

Move to the next page

setDisabled

Change the value of disabled. A value of true disables move

$update

Update the dom structure,for example

v-for
and
v-if
Affect the number of pages, need to manually call
$update
  page {{btn+2}}
  add page

  

page {{page}}

    showPage:function(){
      this.pageNum ++;
      this.$refs.fullpage.$fullpage.$update();
    }

getting started

main.js

Import the plugin of css and js file in main.js

import 'animate.css'
import 'fullpage-vue/src/fullpage.css'
import VueFullpage from 'fullpage-vue'
Vue.use(VueFullpage)

app.vue

template

fullpage-container
fullpage-wp
page
are default class name. Add the
v-fullpage
command to the
page-wp
container. Add the
v-animate
command to the
page
container.
html

fullpage-vue

fullpage-vue

fullpage-vue

fullpage-vue

fullpage-vue

next

script

fullpage-vue
value please refer to api document
js
export default {
  data() {
    return {
      opts: {
        start: 0,
        dir: 'v',
        duration: 500,
        beforeChange: function (currentSlideEl,currenIndex,nextIndex) {
        },
        afterChange: function (currentSlideEl,currenIndex) {
        }
      }
    }
  },
  methods:{
    moveNext(){
      this.$refs.example.$fullpage.moveNext(); //Move to the next page
    }
  }
}

style

Set the

page-container
container's width and height what do you want, and the
v-fullpage
command will adapt the width and height of the parent element. The following settings allow the scrolling page to fill the full screen.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.