Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

📜 Smooth scrolling for Vue.js

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages