vue上拉加载下拉刷新

在 Vue 中实现上拉加载和下拉刷新常用的库有`better-scroll`和`vue-pull-to`等。

## 使用 better-scroll 实现上拉加载和下拉刷新

1. 安装 better-scroll 库

npm install better-scroll -S

2. 在需要实现滚动的组件内引入 better-scroll，并进行初始化配置

<template>
  <div class="scroll-wrapper">
    <div class="scroll-content">
      <!-- 这里是滚动内容 -->
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  mounted() {
    this.scroll = new BScroll('.scroll-wrapper', {
      // better-scroll 的配置项
      probeType: 3, // 实时派发scroll事件
      pullUpLoad: true, // 开启上拉加载
      pullDownRefresh: true // 开启下拉刷新
    })

    this.scroll.on('pullingUp', () => {
      // 触发上拉加载时的操作
    })

    this.scroll.on('pullingDown', () => {
      // 触发下拉刷新时的操作
    })
  },
  destroyed() {
    this.scroll.destroy() // 销毁 better-scroll 实例
  }
}
</script>

3. 在 better-scroll 的配置项中开启上拉加载和下拉刷新，并添加对应的事件监听

this.scroll = new BScroll('.scroll-wrapper', {
  probeType: 3,
  pullUpLoad: true, // 开启上拉加载
  pullDownRefresh: true // 开启下拉刷新
})

// 上拉加载事件
this.scroll.on('pullingUp', () => {
  // 执行上拉加载操作
})

// 下拉刷新事件
this.scroll.on('pullingDown', () => {
  // 执行下拉刷新操作
})

## 使用 vue-pull-to 实现上拉加载和下拉刷新

1. 安装 vue-pull-to 库

npm install vue-pull-to -S

2. 在需要实现滚动的组件内引入 vue-pull-to，并添加对应的事件监听

<template>
  <vue-pull-to
    @refresh="onRefresh"
    @load-more="onLoadMore"
    :pullDownText="'下拉刷新'"
    :pullUpText="'上拉加载更多'"
    :pullingDownText="'释放立即刷新'"
    :pullingUpText="'释放立即加载'"
  >
    <!-- 这里是滚动内容 -->
  </vue-pull-to>
</template>

<script>
export default {
  methods: {
    onRefresh() {
      // 触发下拉刷新时的操作
    },
    onLoadMore() {
      // 触发上拉加载时的操作
    }
  }
}
</script>

在 vue-pull-to 组件中，提供了`refresh`和`load-more`两个事件用于触发下拉刷新和上拉加载操作。

3. 在 vue-pull-to 组件中设置相应的文字提示和样式等属性

<vue-pull-to
  @refresh="onRefresh"
  @load-more="onLoadMore"
  :pullDownText="'下拉刷新'"
  :pullUpText="'上拉加载更多'"
  :pullingDownText="'释放立即刷新'"
  :pullingUpText="'释放立即加载'"
>
  <!-- 这里是滚动内容 -->
</vue-pull-to>

在 vue-pull-to 组件中，可以通过`pullDownText`、`pullUpText`、`pullingDownText`和`pullingUpText`等属性来设置文字提示和样式等属性。