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

下载插件 npm install vue-scroller -D

项目中引入

import VueScroller from 'vue-scroller'
import Vue from 'vue'
Vue.use(VueScroller)

在模板中使用

on-refresh 是一开始加载的时候下拉刷新的时候请求数据
on-infinite 是每当向上滑动的时候去请求数据
2个问题：
1.滑到最后没有数据的时候底下会有空白，解决办法是不写下拉刷洗
2.scroller下面有个空div，如果不写这个div，当没有数据的时候，没有更多数据这个div是加载不出来的

在js里

import $http from '@/utils/http.js'       //ajax请求
import VueScroller from 'vue-scroller'
import Vue from 'vue'
Vue.use(VueScroller)
export default {
  name: 'Shopping',
  components: {
 },
data () {
  return {
    items: [],
    offset: 0 
  }
},
mounted () {
  // this.getDate(1)
},
methods: {
  getDate (offset, fn) {
    $http.get({
      url: 'api/goods?',
      data: {
        'authToken': this.$route.params.authToken, 
        'offset': offset,
        'limit': 10
      },
      success: data => {
        if (data.length < 10) {    //每次请求数据是10条，如果数据不够10条，就是没数据了 让页数=0；
          this.offset = 0
          fn(true)
          return
        } else {
          if (fn) fn()
        }
        if (offset === 1) {
          this.items = data   //如果是想下滑动，刷新数据 就让items等于最新数据
        } else {
          this.items = this.items.concat(data) //否则就把数据拼接
        }
      },
      error: err => {
        console.log(err, '----------err')
        // let message = err.response
        // toastr.toastrUtil(message.data[0].errorMessage)
      }
    })
  },
  infinite (done) {
    this.offset++    //每当向上滑动的时候就让页数加1
    this.getDate(this.offset, done)
  },
  refresh (done) { //这是向下滑动的时候请求最新的数据
    this.offset = 0
    this.getDate(1, done)
  }
}
}

样式

.row {
  display: block;
  width: 100%;
  height: 50px;
  padding: 10px 0 10px 15px;
  font-size: 16px;
  line-height: 30px;
  color: #444; 
  background-color: #fff;
 }
.grey-bg {
    background-color: #eee;
}

1.png

这张图片是写了上拉和下拉都写了以后，滑到最底部是有空白

2.png

这张是不写:on-refresh 是没有空白的

3.png

这张是当不写中间1px的div后，底下的没有更多数据是出不来的