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

Last update: Apr 14, 2022

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.


GitHub

https://github.com/river-lee/vue-fullpage/
Comments
  • 1. 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..

    Reviewed by psaruks at 2018-06-20 09:02
  • 2. 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.

    Reviewed by viniciusgugelmin at 2020-06-10 18:45
  • 3. 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:

    Reviewed by NikolasMelui at 2017-11-08 13:29
  • 4. 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

    Reviewed by huy-tran at 2018-03-02 00:08
  • 5. 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)

    Reviewed by you06 at 2019-03-11 06:35
  • 6. 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 ?

    Reviewed by buroli at 2018-01-02 13:24
  • 7. 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

    Reviewed by impronta48 at 2020-05-25 12:35
  • 8. 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);
                }
            },
    
    Reviewed by viniciusgugelmin at 2020-03-31 13:36
  • 9. 运行不了

    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)

    Reviewed by DavidMGT at 2019-06-13 02:56
  • 10. 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.

    Reviewed by danyakov at 2018-10-23 09:41
  • 11. 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.

    Reviewed by joelsantosbr at 2017-10-09 21:53
  • 12. 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.

    Reviewed by dependabot[bot] at 2021-05-18 01:54
  • 13. [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
    Reviewed by ReseTTim at 2021-03-24 16:41
  • 14. 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

    Reviewed by zapphyre at 2020-06-11 09:35
  • 15. 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.

    Reviewed by madhurikulkarni at 2019-07-17 08:28
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

Jul 10, 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

Jul 10, 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

Jul 10, 2022
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

Aug 6, 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

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

Aug 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

Aug 5, 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

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

Aug 4, 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

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

Apr 13, 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

Aug 4, 2022
🎉 Page scroll progress bar component for @vuejs
🎉 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

Jul 20, 2022
A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.
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

Aug 12, 2022
A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.
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

Aug 16, 2022
Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll
Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll

Vue2 Smooth Scroll Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll. For simple use-cases, the native scroll-behavior CSS p

Jul 21, 2022
A simple scroll picker plugin for Vue 3

vue3-scroll-picker Vue 3 scroll picker plugin. Demo Demo Demo Code Install yarn add vue3-scroll-picker npm i --save vue3-scroll-picker Register Global

Jun 11, 2022
A vue plugins based on better-scroll

A vue plugins based on better-scroll

Jul 11, 2022
⚡️A pull-down refresh and pull-up load more and infinite scroll component for Vue.js.

Vue-Pull-To A pull-down refresh and pull-up load more and infinite scroll component for Vue.js.

Aug 3, 2022