balm-scroll

0.6.0 • Public • Published

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

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>

Special Thanks to

Package Sidebar

Install

npm i balm-scroll

Weekly Downloads

4

Version

0.6.0

License

MIT

Unpacked Size

343 kB

Total Files

13

Last publish

Collaborators

  • elf-mouse