Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 

README.md

Upscroller Plugin for Framework7

This plugin creates a blue button which slides in from the top of the screen when the user has scrolled down. When clicked or sliding back up manually, the button disappears.

Screenshot

Live demo

Check it here http://www.timo-ernst.net/misc/upscrollerdemo/

Install

npm install f7-upscroller

How to use

import upscroller from 'f7-upscroller';

Framework7.use(upscroller);

var app = new Framework7({
  root: '#app',
  name: 'Upscroller demo',
  theme: 'ios',
  upscroller: {
    // text: 'Go down',
    // ignorePages: ['about'],
  },
});

var mainView = app.views.create('.view-main');

The default label of the button is 'Go up'. If you'd like to change the button label, simply declare it during your app's initialization.

Ignore pages

The Upscroller Plugin is included in every page you enter. If you want to ignore the upscroller plugin in some pages, you may now use the following parameter:

var app = new Framework7({
  root: '#app', // Your app root id
  theme: 'ios',
  upscroller: {
    ignorePages: ['about'], // Add pages to ignore here
  },
});

Example

Open demo/dist/index.html in your browser.

Demo source code

Check demo/src/index.js

F7 compatibility

F7 version Compatible?
1.x No (For older version with compatibility of F7 v1 check here.)
2.x (V2) Yes

That's it. Happy coding! :-)

Made with <3 by www.timo-ernst.net

My YouTube channel about Framework7: http://youtube.com/xvalmar

You can’t perform that action at this time.