Vue 下拉刷新及无限加载组件

Vue Scroller is a foundational component of Vonic UI. In purpose of smooth scrolling, pull to refresh and infinite loading.

Demo

Change Logs

• v0.3.9 add getPosition method for scroller instance.
• v0.3.8 fix bug
• v0.3.7 publish bower version
• v0.3.6 support mouse events
• v0.3.4 change required property 'delegate-id' to non-required.
• v0.3.3 support multi scrollers in one page.

How To Use

Step 1: create vue project and install vue-scroller via npm. (we use vue webpack-simple template here)

$ vue init webpack-simple#1.0 my-project
$ cd my-project
$ npm install
$ npm install vue-scroller

Step 2: add resolve option and loader in webpack.config.js as below.

module.exports = {
  // ...

  resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, './node_modules')]
  },

  // ...

  module: {
    loaders: [
      // ...

      {
        test: /vue-scroller.src.*?js$/,
        loader: 'babel'
      }
    ]
  },

  // ...

}

Step 3: copy codes below to overwrite App.vue

  html, body {
    margin: 0;
  }

  * {
    box-sizing: border-box;
  }

  .row {
    width: 100%;
    height: 50px;
    padding: 10px 0;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    color: #444;
    background-color: #fff;
  }

  .grey-bg {
    background-color: #eee;
  }

Step 4: add viewport meta in index.html

Step 5: run the project

$ npm run dev

Scroller instance API

Methods

• resize :Void
• triggerPullToRefresh :Void
• Void finishPullToRefresh :Void
• scrollTo(x:Integer, y:Integer, animate:Boolean) :Void
• scrollBy(x:Integer, y:Integer, animate:Boolean) :Void
• getPosition :Object

That's it, have fun.