Awesome
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
2.1 Css (Edit my-project/app/styles/global/_vendor.scss)
@import 'node_modules/balm-scroll/dist/balm-scroll.scss';
2.2 Js (Edit my-project/app/scripts/main.js)
Default Usage
import Vue from 'vue';
import BalmScroll from 'balm-scroll';
Vue.use(BalmScroll);
Standalone Usage
import Vue from 'vue';
import UiScroll from 'balm-scroll/components/scroll';
// 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.use(UiScroll);
2.3 Vue (Edit a vue component: my-project/app/scripts/views/demos/hello.vue)
<template>
<ui-scroll :options="options">
<!-- Content -->
</ui-scroll>
</template>
export default {
data() {
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
3.1 The many faces of iScroll
<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
<ui-scroll ref="iScroll" :pullUpAction="pullUpAction"></ui-scroll>
export default {
methods: {
firstLoaded() {
// Update here your DOM
this.$refs.iScroll.refresh();
},
pullUpAction(refresh) {
// Update here your DOM
setTimeout(function() {
refresh();
}, 0);
}
}
};
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>