Neurosis Prevention Mechanism

    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

    Install

    npm i balm-scroll

    DownloadsWeekly Downloads

    2

    Version

    0.6.0

    License

    MIT

    Unpacked Size

    343 kB

    Total Files

    13

    Last publish

    Collaborators

    • elf-mouse