Balm Scroll
What is BalmScroll?
iScroll based, smooth scrolling for Vue.js
Demos & Documentation
Quick Start
0. Requirement
1. Install
npm i --save balm-scroll# OR yarn add balm-scroll
2. Usage
my-project/app/styles/global/_vendor.scss
)
2.1 Css (Edit ;
my-project/app/scripts/main.js
)
2.2 Js (Edit Default Usage
;; Vue;
Standalone Usage
;;// OR// import UiScrollLite from 'balm-scroll/components/scroll-lite';// import UiScrollProbe from 'balm-scroll/components/scroll-probe';// import UiScrollZoom from 'balm-scroll/components/scroll-zoom';// import UiScrollInfinite from 'balm-scroll/components/scroll-infinite'; Vue;
my-project/app/scripts/views/demos/hello.vue
)
2.3 Vue (Edit a vue component: <!-- Content -->
{ return options: mouseWheel: true ; };
2.4 Default css sprites
Download pull-icon@2x.png
and extract to /path/to/my-project/app/images
.
⚠️: Applicable only for the
<ui-scroll-probe>
3. Configuring
iScroll
3.1 The many faces of<ui-scroll>
<ui-scroll-lite>
<ui-scroll-probe>
<ui-scroll-zoom>
<ui-scroll-infinite>
Tips: You can pick one component that better suits your need
3.2 Options
- See here
4. Props, Slots and Events
4.1 Props
Common props
Name | Type | Default | Description |
---|---|---|---|
options |
object |
{} |
iScroll options |
excludes |
array |
Excludes for touchmove event preventDefault |
|
pullDownAction |
function(refresh: Function) |
null |
Pull down action |
pullUpAction |
function(refresh: Function) |
null |
Pull up action |
pullOffset |
number |
5 |
Down and up offset for triggering pull action |
scrollEnabled |
boolean |
true |
Load more data controls |
<ui-scroll-probe>
extra props
Name | Type | Default | Description |
---|---|---|---|
pullDownLabel |
string |
'Pull down to refresh' |
Pull down label |
pullUpLabel |
string |
'Pull up to load more' |
Pull up label |
releaseLabel |
string |
'Release to update' |
Release label |
loadingLabel |
string |
'Loading...' |
Loading label |
pullDownY |
number |
5 |
Pull down Y position |
pullAction |
function(scroll: object) |
null |
Scroll action |
⚠️ Special refresh function for first loaded
methods: { // Update here your DOM this$refsiScroll; } { // Update here your DOM ; } ;
4.2 Slots
Name | Description |
---|---|
default |
The default slot holds the scroll child components |
pullDownIcon ⚠️ |
Custom pull down icon |
pullDownLabel ⚠️ |
Custom pull down label |
pullUpIcon ⚠️ |
Custom pull up icon |
pullUpLabel ⚠️ |
Custom pull up label |
⚠️: Applicable only for the
<ui-scroll-probe>