Framework7-Upscroller-Plugin
Framework7-Upscroller-Plugin copied to clipboard
A little framework7 plugin to give users a button to scroll up
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.
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