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

Overview

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

  /**
   *
   * @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}}

page {{page}}

">
  <button type="button" 
    v-for="btn in pageNum"
    :class="{active:index == btn + 2}" 
    @click="moveTo(btn+2)">page {{btn+2}}button>
  <button type="button" @click="showPage()">add pagebutton>

  <div class="page-2 page" v-for="page in pageNum">
    <h2 class="part-2" v-animate="{value: 'bounceInRight'}">page {{page}}h2>
  div>
    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-containerfullpage-wppageare default class name. Add the v-fullpage command to the page-wp container. Add the v-animate command to the page container.

fullpage-vue

fullpage-vue

fullpage-vue

fullpage-vue

fullpage-vue

">
<div class="fullpage-container">
  <div class="fullpage-wp" v-fullpage="opts" ref="example">
    <div class="page-1 page">
      <p class="part-1" v-animate="{value: 'bounceInLeft'}">fullpage-vuep>
    div>
    <div class="page-2 page">
      <p class="part-2" v-animate="{value: 'bounceInRight'}">fullpage-vuep>
    div>
    <div class="page-3 page">
      <p class="part-3" v-animate="{value: 'bounceInLeft', delay: 0}">fullpage-vuep>
      <p class="part-3" v-animate="{value: 'bounceInRight', delay: 600}">fullpage-vuep> <p class="part-3" v-animate="{value: 'zoomInDown', delay: 1200}">fullpage-vuep> div> div> <button @click="moveNext">nextbutton> div>

script

fullpage-vue value please refer to api document

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.


Comments
  • how move to page after page reloading

    how move to page after page reloading

    After reloading page, it`s default starts on first page, but how to scroll to the page on which the user reloaded the page. I had a solution with a cookie, but its doesnt work..

    mounted() {
         this.$refs.fullpage.$fullpage.moveTo(2);
    }
    

    that doesnt work..

    opened by psaruks 16
  • moveTo isn't working for the last slide

    moveTo isn't working for the last slide

    I'm using the function moveTo to redirect to specifcs slides in my page. For example, if the url is /slide3, the page starts with slide number 3, but if the number 3 is the last it bugs and loads the first slide.

    opened by viniciusgugelmin 8
  • Add scroll with overflow content.

    Add scroll with overflow content.

    If you want to put more information on one screen you can 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. After that you have the scrolling page to fill the full screen. When you reach the bottom of the page the scroll will turn on normal mode move between pages and you can proceed with the next page, just slide as before. It function works on desktops and mobile devices. Hope you will like it :yum: See you on GitHub :octocat:

    proposal 
    opened by NikolasMelui 8
  • Mobile scroll issue

    Mobile scroll issue

    Hi I am using your plugin on my charity project which I really like.

    http://www.shekinahgloryacademy.co.ke/

    It works perfectly on desktop but mobile. I can't scroll unless touching the little green navigation dots on right hand side.

    It's great if you can help me fix this one out.

    Many thanks

    opened by huy-tran 5
  • callback function problem

    callback function problem

    Hi, this tool is awesome, thank you for your working on vue-fullpage. I found some problems while using it.

    I start with the options from README:

    export default {
      data() {
        return {
          opts: {
            start: 0,
            dir: 'v',
            duration: 500,
            beforeChange: function (prev, next) {
            },
            afterChange: function (prev, next) {
            }
          }
        }
      },
      method:{
        moveNext(){
          this.$refs.example.$fullpage.moveNext(); //Move to the next page
        }
      }
    }
    

    When I look into beforeChange function, prev is a DOM object, I think the parameters should be beforeChange: function (html, prev, next)

    opened by you06 3
  • Component crash when Vue.js devtools is open

    Component crash when Vue.js devtools is open

    Hi,

    Strange bug but when you are in dev mode with webpack and vue-cli and open Vue dev tools component crash.

    To reproduce :

    • Open local url
    • Open Chrome Dev tools
    • Open Vue dev tools and switch to 'Events' tabs.

    The component doesn't work anymore. I don't know if it's related with the events emitted by the component ?

    opened by buroli 2
  • How to scroll to the top of the page

    How to scroll to the top of the page

    Hi, The last page of my fullpage slideshow is really long, so I use overflow scroll.

    When the users goes back and then forward again I would like the long page to start from the top (and lot from the scrolling point where it was, is this possible, if so how?)

    Example here: (see last page) https://ebike.bikesquare.eu/baraggia/in-ebike-tra-risaie

    Thanks Massimo

    opened by impronta48 1
  • mouse left click AND moveTo has no animation

    mouse left click AND moveTo has no animation

    Sup, I'm coding a slide site, and I need to "block" the switch of pages of the left click of mouse, I just want to switch the page with the scroll. The other issue is that the moveTo function is not working properly, I have a menu aSide that calls a event, that also calls the moveTo function. (I hope you can get it, I'm brazilian)

                         <li>
                            <a @click="moveTo(0, 'sobre')">
                                <span>
                                    Sobre
                                </span>
                            </a>
                        </li>
    
    mounted() {
                Event.$on('move-to', this.moveTo , this.slide)
                this.moveTo();
            },
    
    methods: {
                moveTo(slide) {
                    this.$refs.fpcontainer.$fullpage.moveTo(slide);
                }
            },
    
    opened by viniciusgugelmin 1
  • 运行不了

    运行不了

    node install

    node-pre-gyp ERR! Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.2/fse-v1.1.2-node-v67-darwin-x64.tar.gz node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v67 ABI) (falling back to source compile with node-gyp) node-pre-gyp ERR! Tried to download(undefined): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.2/fse-v1.1.2-node-v67-darwin-x64.tar.gz node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v67 ABI) (falling back to source compile with node-gyp)

    opened by DavidMGT 1
  • More instructions

    More instructions

    Hello, can you provide more instructions about plugin?

    For example, how to make menu work. I add @click="moveTo(2)", but no action and I receive error (method "moveTo" is not defined on the instance but referenced during render).

    It is not clear how to fix this.

    opened by danyakov 1
  • How to refresh pages with vue 2

    How to refresh pages with vue 2

    I want use v-show with pages and reload fullpage with function, it is possible?

    Refer https://github.com/alvarotrigo/fullPage.js#methods method reBuild()

    Sorry for my english, i'm Brazillian, thanks a lot.

    opened by joelsantosbr 1
  • Bump rollup-plugin-serve from 0.4.2 to 1.0.2

    Bump rollup-plugin-serve from 0.4.2 to 1.0.2

    Bumps rollup-plugin-serve from 0.4.2 to 1.0.2.

    Release notes

    Sourced from rollup-plugin-serve's releases.

    v1.0.2

    Fixed path traversal issue

    Changelog

    Sourced from rollup-plugin-serve's changelog.

    [1.0.2] - 2020-07-17

    Fixed

    • Fix path traversal issue

    [1.0.1] - 2019-01-27

    Added

    • Add Intellisense support #34

    Fixed

    • Set minimum version for mime package

    [1.0.0] - 2019-01-11

    Fixed

    • Update ongenerate to generateBundle

    Removed

    • Remove built-in favicon.ico #20

    [0.6.1] - 2018-12-23

    Added

    • Add support for rollup --watch (Release http server on rollup reload)

    [0.5.0] - 2018-09-18

    Added

    • Allow to override path for historyApiFallback option
    • Option openPage

    Fixed

    • Fix host option
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • [Bug] Scroll on mouse move event

    [Bug] Scroll on mouse move event

    I scrolled up and down a few times and then suddenly when I move my mouse horizontal the page scrolls.

    does anyone has the same problem?

    #Version

    • vue: 2.6.12
    • fullpage-vue: 2.1.1
    opened by ReseTTim 2
  • page scroll time for translate effect

    page scroll time for translate effect

    a question rather: how do you make use of translate effect between two images while scrolling on the same page? => how to set scrolling time/distance one the same page? thanks for extension

    opened by zapphyre 4
  • Two Instances of vue-fullpage

    Two Instances of vue-fullpage

    Is it possible to have two separate instances of the plugin .? I have a situation where it has to be used in two separate div. Any input is appreciated.

    opened by madhurikulkarni 1
Releases(1.9.1)
Owner
abelTO
We're here to put a dent in the universe. Otherwise why else even be here?
abelTO
A pure vue horizontal list implementation with minimal dependencies, ssr support, mobile friendly, touch friendly and responsive now with auto scroll

A pure vue horizontal list implementation with minimal dependencies, ssr support, mobile friendly, touch friendly and responsive now with auto scroll

Mihir Kumar 5 May 14, 2022
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 84 Nov 24, 2022
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 84 Nov 24, 2022
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 84 Nov 24, 2022
Scroll Picker Component for Vue2. Support All Gestures of Mouse(even also MouseWheel!) and Touch.

Scroll Picker Component for Vue2. Support All Gestures of Mouse(even also MouseWheel!) and Touch.

chenronghui 0 Mar 1, 2021
A vue directive to make a scrollable element scroll by draging to the scroll direction

vue-dragscroll vue-dragscroll is a micro vue.js directive which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" st

null 229 Nov 16, 2022
Vue Scroll Show - Showing the element if the user reached it after scroll

Vue Scroll Show Showing the element if the user reached it after scroll Installation npm i --save-dev vue-scroll-show import VueScrollShow from 'vue-s

Aleksey Pleshkov 10 Jan 5, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 533 Nov 20, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 533 Nov 20, 2022
nuxt-fullpage is a nuxt module for creating fullscreen page scroll fast and simple.

Nuxt fullpage Nuxt module for creating fullscreen page scroll fast and simple. Demo online Table of contents Installation Usage Options Contributing I

Open Source Afghanistan 15 Jun 14, 2022
A Back-to-top component for Vue.js, which scroll page to the top when clicked

Vue Backtotop Component A Back-to-top component for Vue.js, which scroll page to the top when clicked Demo See demo. Install via npm npm install vue-b

Caio Fernandes 183 Nov 17, 2022
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

Honoré Nintunze 57 Mar 2, 2022
Scroll to page top button, Vue.js component.

vue-go-top Scroll to page top button, Vue.js component. Demo Demo Install Browser <script src="vue.js"></script> <script src="vue-go-top.min.js"></scr

null 29 Nov 14, 2022
A Back-to-top component for Vue.js, which scroll page to the top when clicked

Vue Backtotop Component A Back-to-top component for Vue.js, which scroll page to the top when clicked Demo See demo. Install via npm npm install vue-b

Caio Fernandes 183 Nov 17, 2022
Very simple page top scroll seek bar with Vue.js

Very simple page top scroll seek bar with Vue.js

Akira Kanno 0 Nov 21, 2021
🎉 Page scroll progress bar component for @vuejs

vue-scroll-progress ?? Simple Vue.js plugin for page scroll progress bar Live Demo Installation npm i vue-scroll-progress --save yarn add vue-scroll-p

Hyouk Seo 96 Jul 20, 2022
A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.

Vuescroll Introduction Vuescroll is a scrollbar plugin based on Vue.js 2.X, it is very easy to use, no complex options and each option has its default

null 1.2k Nov 29, 2022
A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.

Vuescroll Introduction Vuescroll is a scrollbar plugin based on Vue.js 2.X, it is very easy to use, no complex options and each option has its default

null 1.2k Nov 20, 2022
SkyScroll - A Vue plugin for scroll/resize events and calculations.

SkyScroll A Vue plugin for scroll/resize events and calculations. Description This plugin exposes a handful of useful properties on all Vue instances,

Limbo (formerly Skybrud) 1 Oct 4, 2018