No Password Management
Publish your own packages to the world's most popular software ecosystem with npm Pro.Get started »

balm-scroll

0.5.3 • 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)

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

Install

npm i balm-scroll

DownloadsWeekly Downloads

0

Version

0.5.3

License

MIT

Unpacked Size

357 kB

Total Files

14

Last publish

Collaborators

  • avatar