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

原文 https://github.com/wangdahoo/vue-scroller

Vue Scroller

Vue Scroller is a foundational component ofVonic 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

<template>
  <scroller delegate-id="myScroller"
            :on-refresh="refresh"
            :on-infinite="loadMore"
            v-ref:my_scroller>
    <div v-for="(index, item) in items" @click="onItemClick(index, item)"
         class="row" :class="{'grey-bg': index % 2 == 0}">
      {{ item }}
    </div>
  </scroller>
</template>

<script>
  import Scroller from 'vue-scroller'

  export default {
    components: {
      Scroller
    },

    data () {
      return {
        items: []
      }
    },

    ready() {

      for (let i = 1; i <= 20; i++) {
        this.items.push(i + ' - keep walking, be 2 with you.')
      }
      this.top = 1
      this.bottom = 20

      setTimeout(() => {
        /* 下面2种方式都可以调用 resize 方法 */
        // 1. use scroller accessor
        $scroller.get('myScroller').resize()

        // 2. use component ref
        // this.$refs.my_scroller.resize()
      })
    },

    methods: {
      refresh() {
        setTimeout(() => {
          let start = this.top - 1

          for (let i = start; i > start - 10; i--) {
            this.items.splice(0, 0, i + ' - keep walking, be 2 with you.')
          }

          this.top = this.top - 10;

          /* 下面3种方式都可以调用 finishPullToRefresh 方法 */

          // this.$broadcast('$finishPullToRefresh')
          $scroller.get('myScroller').finishPullToRefresh()
          // this.$refs.my_scroller.finishPullToRefresh()

        }, 1500)
      },

      loadMore() {
        setTimeout(() => {

          let start = this.bottom + 1

          for (let i = start; i < start + 10; i++) {
            this.items.push(i + ' - keep walking, be 2 with you.')
          }

          this.bottom = this.bottom + 10;

          setTimeout(() => {
            $scroller.get('myScroller').resize()
          })
        }, 1500)
      },

      onItemClick(index, item) {
        console.log(index)
      }
    }

  }
</script>

<style>
  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;
  }
</style>

Step 4: add viewport meta in index.html

<meta name="viewport" content="width=device-width, user-scalable=no">

Step 5: run the project

$ npm run dev

来源：https://www.cnblogs.com/liangxuru/p/6434267.html

标签

vue

scroller