vue.js移动端app之上拉加载以及下拉刷新实战

对于vue.js移动端app的上拉加载和下拉刷新的实现，我们可以使用第三方插件better-scroll来实现。better-scroll是一款基于原生js的iscroll的重写版本，在实现上提供了更好的性能和更友好的api。

下面是vue.js移动端app之上拉加载以及下拉刷新的完整攻略：

安装better-scroll

在使用better-scroll之前，需要先安装它。在命令行中执行以下命令：

npm install better-scroll -S

下拉刷新

下拉刷新的实现可以分成以下几步：

1. 设计页面结构

假设我们有一个数据列表需要下拉刷新，那么首先需要在页面中设计好结构。一般情况下，下拉刷新的容器高度固定，而数据列表会根据内容自动撑高。

<template>
  <div class="wrapper">
    <div class="list">
      // 数据列表，根据实际情况进行适当修改
    </div>
    <div class="pulldown">
      <div class="loading" ref="pullup">下拉刷新</div>
    </div>
  </div>
</template>

<style>
  .wrapper {
    height: 100%;
    overflow: hidden;
  }
  .list {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 50px; // 下拉刷新容器的高度
    overflow: auto;
  }
  .pulldown {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 14px;
    color: #999;
  }
  .loading {
    display: inline-block;
    transition: all .2s;
    transform: rotate(0deg);
    margin-right: 10px;
  }
  .loading.rotate {
    transform: rotate(180deg);
  }
</style>

2. 初始化better-scroll

在vue的mounted生命周期中初始化better-scroll。在初始化时，需要配置下拉刷新的参数：

import BScroll from 'better-scroll'

export default {
  data() {
    return {
      bscroll: null, // better-scroll实例
      loaderText: '下拉可以刷新',
      pullLoader: {
        threshold: 80, // 在pullDownRefresh阈值范围内的距离为下拉阈值
        stop: 40 // 最终停留的位置
      }
    }
  },
  mounted() {
    this.initScroll()
  },
  methods: {
    initScroll() {
      const wrapper = this.$refs.wrapper
      const pullup = this.$refs.pullup
      const self = this
      this.bscroll = new BScroll(wrapper, {
        pullDownRefresh: {
          threshold: this.pullLoader.threshold,
          stop: this.pullLoader.stop
        },
        click: true
      })

      this.bscroll.on('pullingDown', function () {
        // 刷新动作
        self.refreshList()
        setTimeout(() => {
          // 刷新完成后重置better-scroll
          self.bscroll.finishPullDown()
          self.bscroll.refresh()
          self.loaderText = '下拉可以刷新'
        }, 1000)
      })

      this.bscroll.on('scroll', function (pos) {
        // 根据下拉距离展示loading样式
        if (pos.y > (self.pullLoader.threshold + self.pullLoader.stop)) {
          self.loaderText = '松开立即刷新'
          pullup.classList.add('rotate')
        } else {
          self.loaderText = '下拉可以刷新'
          pullup.classList.remove('rotate')
        }
      })
    }
  }
}

3. 编写下拉刷新方法

// 在methods中定义refreshList方法用来下拉刷新
methods: {
  refreshList() {
    // 执行下拉刷新逻辑
    console.log('refresh list')
  }
}

上拉加载

上拉加载的实现和下拉刷新类似，也分为以下三步：

1. 设计页面结构

上拉加载的容器放在数据列表的下方，当达到一定的距离时，触发上拉加载事件。

<template>
  <div class="wrapper">
    <div class="list">
      // 数据列表，根据实际情况进行适当修改
    </div>
    <div class="pullup" ref="pullup">
      <div class="loading">loading...</div>
    </div>
  </div>
</template>

<style>
  .wrapper {
    height: 100%;
    overflow: hidden;
  }
  .list {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 50px; // 上拉加载容器的高度
    overflow: auto;
  }
  .pullup {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 14px;
    color: #999;
  }
  .loading {
    display: inline-block;
    transition: all .2s;
    transform: rotate(0deg);
    margin-right: 10px;
  }
</style>

2. 初始化better-scroll

和下拉刷新一样，在vue的mounted生命周期中初始化better-scroll。在初始化时需要配置上拉加载的参数：

export default {
  data() {
    return {
      bscroll: null, // better-scroll实例
      loaderText: '正在加载...',
      pushLoader: {
        threshold: 110 // 在pushLoadMore阈值范围内的距离为下拉阈值
      }
    }
  },
  mounted() {
    this.initScroll()
  },
  methods: {
    initScroll() {
      const wrapper = this.$refs.wrapper
      const pullup = this.$refs.pullup
      const self = this
      this.bscroll = new BScroll(wrapper, {
        pullDownRefresh: true, // 标记为上拉加载
        click: true,
        pullUpLoad: {
          threshold: this.pushLoader.threshold
        }
      })

      this.bscroll.on('pullingUp', function () {
        // 加载更多
        self.loadMore()
      })

      this.bscroll.on('scroll', function (pos) {
        // 根据下拉距离展示loading样式
        if (pos.y < (pos.maxScrollY - self.pushLoader.threshold)) {
          self.loaderText = '释放加载更多...'
        } else {
          self.loaderText = '正在加载...'
        }
      })
    }
  }
}

3. 编写上拉加载方法

// 在methods中定义loadMore方法用来上拉加载
methods: {
  loadMore() {
    // 执行上拉加载逻辑
    console.log('load more')
  }
}

以上就是vue.js移动端app之上拉加载以及下拉刷新的实现。其中插件better-scroll提供了更好的性能和api，建议大家多加使用。