Skip to content
📜 Smooth scrolling for Vue.js
JavaScript Vue Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
components
config
dist
docs
examples
src
.browserslistrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.npmrc
.prettierrc
CHANGELOG.md
LICENSE
README.md
babel.config.js
gulpfile.js
package.json
yarn.lock

README.md

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)

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 pull-icon@2x.png 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

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(scroll: object) null Scroll action
pullDownAction function(refresh: Function) null Pull down action
pullUpAction function(refresh: Function) null Pull up action
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" :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>

Special Thanks to

You can’t perform that action at this time.