vue父组件刷新子组件_Vue组件，用于拉动刷新和推入负载

vue父组件刷新子组件

vue-easyrefresh (vue-easyrefresh)

Just like the name, EasyRefresh makes it easy to implement pull-down refresh and pull-up operations on Vue-based web applications, supporting mainstream PCs and mobile browsers. Its function is inspired by Android's SmartRefreshLayout, which also draws on the advantages of many three-party libraries. EasyRefresh integrates a variety of styles of Header and Footer, but it has no limitations, you can easily customize it to do whatever you want. Using Html's powerful animations, even a simple control can be done. The goal of EasyRefresh is to create a powerful, stable, and mature drop-down refresh framework.

就像名称一样，EasyRefresh使在支持主流PC和移动浏览器的基于Vue的Web应用程序上轻松实现下拉刷新和上拉操作成为可能。 其功能受到Android SmartRefreshLayout的启发，该功能还利用了许多三方库的优势。 EasyRefresh集成了多种页眉和页脚样式，但没有限制，您可以轻松地自定义它以执行所需的任何操作。 使用Html强大的动画，甚至可以进行简单的控制。 EasyRefresh的目标是创建一个功能强大，稳定且成熟的下拉刷新框架。

View demo 查看演示 Download Source 下载源

特征： (Features:)

• Support cross-bounce rebound effect

  支持交叉反弹反弹效应

• Support for customization and has integrated a lot of cool Header and Footer

  支持自定义，并集成了许多不错的页眉和页脚

• Support pull-down refresh, pull-up loading (automatically)

  支持下拉刷新，上载(自动)

• Support trigger refresh and load

  支持触发器刷新和加载

• Support for Header and Footer list embedding as well as view floats

  支持页眉和页脚列表嵌入以及视图浮动

• Support list event listener, make any look of Header and Footer, and can be placed anywhere

  支持列表事件侦听器，可以显示任何页眉和页脚，并且可以放置在任何地方

演示版 (Demo)

样品 (Sample)

1.安装vue-easyrefresh (1.Install vue-easyrefresh)

// Use commands
npm install vue-easyrefresh -S
or
yarn add vue-easyrefresh

// Use package.json
"dependencies": {
  "vue-easyrefresh": "version",
  ....
}

2.导入EasyreFresh (2.import EasyreFresh)

import Vue from 'vue'
import EasyRefresh from 'vue-easyrefresh'
Vue.use(EasyRefresh)

3.使用EasyreFresh (3.use EasyreFresh)

<EasyRefresh
    :userSelect="false"
    :onRefresh="onRefresh"
    :loadMore="loadMore">
    <!-- content goes here -->
</EasyRefresh>
<!-- For more ways to use, please refer to Example -->

使用指定的页眉和页脚 (Use the specified Header and Footer)

<EasyRefresh
        :userSelect="false"
        :onRefresh="onRefresh"
        :loadMore="loadMore">
    <template v-slot:header>
        <MaterialHeader/>
    </template>
    <StripeList :count="itemCount"/>
    <template v-slot:footer>
        <MaterialFooter/>
    </template>
</EasyRefresh>
<!-- Note: <template v-slot:header> is the syntax after vue2.6, you can still use <MaterialHeader slot="header"/> -->

翻译自: https://vuejsexamples.com/vue-component-for-pull-refresh-and-push-load/

vue父组件刷新子组件