Balm-scroll NPM

Balm Scroll

What is BalmScroll?

iScroll based, smooth scrolling for Vue.js

Demos & Documentation

Quick Start

0. Requirement

BalmJS(Recommended) or other toolchains
Vue.js@2.1.0+

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