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.


Issues
  • 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
  • 在IE11下不能用鼠标滚轮滚动屏幕

    在IE11下不能用鼠标滚轮滚动屏幕

    鼠标拖拽可以滚动,滚轮不能滚动,官方的例子也是这样,有什么可以解决的方案吗?

    opened by jiaozhouzhou 5
  •  wechat scroll  problem

    wechat scroll problem

    set overflow 'scroll' will make the page unscrollable in WeChat tested in MIUI 9(android 7.1) and wechat devtool(0.7.0) on PC

    opened by chas125 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
  • 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
  • Prevent scroll down refresh on mobile

    Prevent scroll down refresh on mobile

    how to prevent refresh page when we want to back to the previous section on mobile?

    opened by rolexta 4
  • 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
  • Update README.md

    Update README.md

    opened by 17881055 0
  • v-amimate in child component not work

    v-amimate in child component not work

    v-amimate in child component not work

    opened by ArnaBlack 1
  • 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
  • cancel loop scroll still cause the index change

    cancel loop scroll still cause the index change

    Suppose we have this requirement:

    • This is a loop scroll application.
    • It can only loop from the end to the start

    Then I'm going to cancel the scroll event when it scroll from the start to the end. This is my beforeChange callback function.

    beforeChange: function (el, prev, next) {
      console.log('brefore', prev, next)
      if (prev === 2 && next === 2) {
        return false
      }
      console.log('after', prev, next)
    }
    

    See JSFiddle demo: https://jsfiddle.net/z4Lvwhr6/

    Once open, scroll up for twice, there will be there logs in the console:

    brefore 2 2 // no scroll happened, still in page1
    brefore 2 1 // scroll from page1 to page2
    after 2 1
    
    opened by you06 0
  • Scroll on Firefox 64.0

    Scroll on Firefox 64.0

    On Mozilla firefox, scroll working reversed. Like i'm scroll down page go up.

    opened by Almostsk 3
  • How to catch down or up event

    How to catch down or up event

    1. I want to catch event and input my custom event, when mousewheel down or up. How I can do it? Thank you.

    2. I want to know option's movingFlag description. how to use movingFlag data?

    opened by riflockle7 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 Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 167 Oct 12, 2021
A sigle-page scroll plugin based on [email protected],support for mobile and PC .

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 hori

abelTO 149 Sep 13, 2021
Vue3.0 无缝滚动组件

vue3-seamless-scroll Vue3.0 无缝滚动组件 目前组件支持上下左右无缝滚动,单步滚动,并且支持复杂图标的无缝滚动,组件支持原生 css3动画 滚动,目前组件支持平台与Vue3.0支持平台一致。 效果展示 安装 npm npm install vue3-seamless-scr

null 15 Oct 7, 2021
Handy floating scrollbar component for Vue 3

vue-handy-scroll Handy floating scrollbar component for Vue 3. Synopsis vue-handy-scroll is a component that solves the problem of scrolling lengthy c

null 6 Oct 2, 2021
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 169 Oct 14, 2021
Component that customizes the scroll and inserts shadow when scrolling exists

Vue Scroll Shadow • • Component that customizes the scroll and inserts shadow when scrolling exists Installation NPM npm i vue-scroll-shadow # or yarn

André Lins 2 Oct 1, 2021
Customize the scrolling position on route navigation. Especially hash mode.

vue-scroll-behavior Customize the scrolling position on route navigation IE / Edge Firefox Chrome Safari Opera iOS Android IE9+, Edge ✓ ✓ ✓ ✓ ✓ ✓ Tabl

Yazhe Wang 136 Jul 13, 2021
A super simple Vue component that allows fullscreen and horizontal scroll snapping.

Vue Scroll Snap A super simple Vue component that allows both fullscreen and horizontal scroll snapping. Showcase Check out the live demo to see the s

Angelo 26 Oct 12, 2021
A scroll loading component for vue.js.

vue-scroll-loader 简体中文 A scroll loading component for vue.js. View demo Browsers Already use IntersectionObserver polyfill compatible with mainstream

John Wu 57 Sep 30, 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 90 Oct 12, 2021
Scrollspy for Vue2

vue2-scrollspy Scrollspy, and animated scroll-to, for Vue2, inspired by vue-scrollspy. See https://ibufu.github.io/vue2-scrollspy/ or Jsfiddle. Instal

morning 130 Sep 1, 2021
A Vue component that syncronize containers scroll positions

vue-scroll-sync A Vue component that syncronize containers scroll positions Installation npm i --save vue-scroll-sync Browser Include the script file,

null 20 Sep 30, 2021
A Vue.js component to top of the page

vue-scroll-up Installation Get from npm / yarn: npm i vue-scroll-up yarn add vue-scroll-up or just include vue-scroll-up.js to your view like <script

Willy Hong 5 Sep 22, 2021
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 81 Oct 12, 2021
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 52 Aug 12, 2021
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 494 Oct 12, 2021
A tiny Vue directive that stop propagation scroll when edge reached

vue-scroll-stop A tiny Vue directive that stop propagation scroll when edge reached. Works with desktop mousewheel and mobile touchmove events ✅ On ❌

Volodymyr Antoniuk 42 Aug 2, 2021
A vue2 component based on Iscroll

vue-virtual-infinite-scroll a vue2 component based on Iscroll, supports big data list with high performance scroll, infinite load and pull refresh. Ba

Lei Zuo 45 Mar 4, 2021
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 81 Oct 12, 2021