vue 下拉刷新，上拉加载 vue-scroller

git

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

Demo

https://wangdahoo.github.io/vue-scroller/

 

How to use

npm i vue-scroller -S

/* ignore this if you include vue-scroller.js by <script> tag from a cdn, such as unpkg */
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

<scroller 
  :on-refresh="refresh"
  :on-infinite="infinite">
  <!-- content goes here -->
</scroller>

简单实例

需要注意scrolller的定位方式，以及

<template>
  <div class="container">

    <!--对于scroller默认高度总是占满父容器，虽然可以使用属性设置高度-->
    <!--但在用一个div包住4会更简单点-->
    <div style="height: 600px">

      <!--scroller组件定位方式用relative 否则会溢出父容器-->
      <scroller
        class="scroller"
        :on-refresh="refresh"
        :on-infinite="infinite"
        ref="my_scroller">
        <div v-for="(item, index) in items" @click="onItemClick(index, item)"
             class="row">
          {{ item }}
        </div>
      </scroller>
    </div>

    <div style="height: 200px;width: 100%;background: gray"></div>
  </div>

</template>

<script>
  export default {

    data() {
      return {
        items: []
      }
    },
    mounted() {
      for (let i = 1; i <= 20; i++) {
        this.items.push(i)
      }
    },
    methods: {
      refresh(done) {
        this.items = [1, 2, 3, 4, 5, 6].map(() => parseInt(Math.random() * 10))
        done()
      },
      infinite(done) {
        this.items = this.items.concat([12, 3, 4, 42,])
        done()
      },
      onItemClick(index, item) {
        console.log(index)
      }
    }
  }
</script>


<style scoped>
  .container {
    height: 100vh;
    overflow-y: scroll;
  }

  .row {
    height: 100px;
    width: 100px;
    background: deepskyblue;
    margin: 10px;
  }

  .scroller {
    position: relative;
  }
</style>