Vue-Pull-To 使用教程

Vue-Pull-To 使用教程

vue-pull-to⚡️ A pull-down refresh and pull-up load more and infinite scroll component for Vue.js --Vue下拉刷新组件项目地址:https://gitcode.com/gh_mirrors/vu/vue-pull-to

项目介绍

Vue-Pull-To 是一个用于 Vue.js 的下拉刷新和上拉加载更多组件。它支持无限滚动，并且可以自定义刷新和加载的文本提示。该组件通过简单的配置和使用，可以轻松集成到任何 Vue 项目中，提供流畅的用户体验。

项目快速启动

安装

首先，通过 npm 安装 vue-pull-to：

npm install vue-pull-to --save

基本使用

在 Vue 组件中引入并使用 vue-pull-to：

<template>
  <div class="BasePullTo">
    <pull-to :top-load-method="refresh" :bottom-load-method="loadMore">
      <ul class="list">
        <li class="item" v-for="item in dataList" :key="item">
          {{ item }}
        </li>
      </ul>
    </pull-to>
  </div>
</template>

<script>
import PullTo from 'vue-pull-to'

export default {
  components: {
    PullTo
  },
  data() {
    return {
      dataList: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    refresh(loaded) {
      setTimeout(() => {
        this.dataList = [1, 2, 3, 4, 5]
        loaded('done')
      }, 1000)
    },
    loadMore(loaded) {
      setTimeout(() => {
        this.dataList.push(this.dataList.length + 1)
        loaded('done')
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.BasePullTo {
  height: 400px;
  overflow-y: auto;
}
.item {
  height: 40px;
  line-height: 40px;
  background: rgba(0, 0, 0, 0.03);
  & + .item {
    margin-top: 20px;
  }
}
</style>

应用案例和最佳实践

自定义配置

你可以通过 top-config 和 bottom-config 属性来自定义下拉刷新和上拉加载的文本提示和行为：

<template>
  <div class="BasePullTo">
    <pull-to :top-load-method="refresh" :bottom-load-method="loadMore"
             :top-config="topConfig" :bottom-config="bottomConfig">
      <ul class="list">
        <li class="item" v-for="item in dataList" :key="item">
          {{ item }}
        </li>
      </ul>
    </pull-to>
  </div>
</template>

<script>
import PullTo from 'vue-pull-to'

export default {
  components: {
    PullTo
  },
  data() {
    return {
      dataList: [1, 2, 3, 4, 5],
      topConfig: {
        pullText: '下拉刷新',
        triggerText: '释放更新',
        loadingText: '加载中',
        doneText: '加载完成',
        failText: '加载失败',
        loadedStayTime: 400,
        stayDistance: 50,
        triggerDistance: 70
      },
      bottomConfig: {
        pullText: '上拉加载',
        triggerText: '释放更新',
        loadingText: '加载中',
        doneText: '加载完成',
        failText: '加载失败'
      }
    }
  },
  methods: {
    refresh(loaded) {
      setTimeout(() => {
        this.dataList = [1, 2, 3, 4, 5]
        loaded('done')
      }, 1000)
    },
    loadMore(loaded) {
      setTimeout(() => {
        this.dataList.push(this.dataList.length + 

vue-pull-to⚡️ A pull-down refresh and pull-up load more and infinite scroll component for Vue.js --Vue下拉刷新组件项目地址:https://gitcode.com/gh_mirrors/vu/vue-pull-to