refresh-loading-x v1.0.5

上拉加载，下拉刷新vue组件

npm install refresh-loading-x npm install better-scroll

使用方法

<template>
  <div class="wrapper">
    <refreshScroll ref="scroll" height="100%" class="scroll" @pullRefresh="pullRefresh" @loadMore="loadMore">
      <div class="content">
        <div class="loading" :class="{showLoading: showTopLoading}">
          <img src="./loading.gif" alt="">
        </div>
        <ul class="list">
          <li v-for="(item, index) in testArr" :key="index">{{item}}</li>
        </ul>
        <div class="loading showLoading">
          <img src="./loading.gif" alt="">
        </div>
      </div>
    </refreshScroll>
  </div>
</template>

<script>
import refreshScroll from 'refresh-loading-x'
export default {
  name: 'wrapper',
  data () {
    return {
      showTopLoading: false,
      testArr: [],
      showBottomLoading: false
    }
  },
  created () {
    for (let i = 0; i < 30; i++) {
      this.testArr.push(i)
    }
  },
  methods: {
    pullRefresh () {
      if (this.showTopLoading) return
      this.showTopLoading = true
      setTimeout(() => {
        this.showTopLoading = false
      }, 1500)
      this.$refs.scroll.refresh()
    },
    loadMore () {
      if (this.showBottomLoading) return
      this.showBottomLoading = true
      this.$refs.scroll.refresh()
      setTimeout(() => {
        this.showBottomLoading = false
        this.testArr = this.testArr.concat([1, 2, 3, 4, 5, 6])
        this.$refs.scroll.refresh()
      }, 1500)
    }
  },
  components: {
    refreshScroll
  }
}

注意事项

高度和position必传一个，如果是绝对定位或者固定定位请传top和bottom都是为了计算刷新容器的高度