balm-scroll

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)

import Vue from 'vue';
import BalmScroll from 'balm-scroll';

Vue.use(BalmScroll);

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 [e-mail] and extract to /path/to/my-project/app/images.

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

Name	Type	Default	Description
options	object	{}	iScroll options
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	null	Scroll action
pullDownAction	function	null	Pull down action
pullUpAction	function	null	Pull up action
refreshTimeout	number	1000	Refresh timeout
excludes	array		Excludes for touchmove event preventDefault
scrollEnabled ⚠️	boolean	true	Load more data controls

⚠️: Applicable only for the <ui-scroll-probe>

• Special function

<ui-scroll ref="iScroll"></ui-scroll>

export default {
  methods: {
    loadMore() {
      // ...
      this.$refs.iScroll.refresh();
    }
  }
};

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>

Special Thanks to

• BalmJS
• Vue.js
• iScroll

Changelog

0.5.0 (2019.08.13)

New Config

• add scrollEnabled: boolean prop for load more data controls

---