uniapp组件整理之 下拉刷新，上拉加载

作者的话

---

本人使用uniapp开发H5,小程序，app还是有一段时间了，最近稍微有点时间，整理一下一些常用的组件，重温自己知识的同时，希望能对各位小伙伴们有帮助。

最后：开发不容易，能够帮助到您，是我的荣幸，当然，如果有什么问题，可以留言咱们一起讨论，共同进步！

---

插件地址

Dcloud 插件市场：自定义下拉刷新，上拉加载，回到顶部

---

更新说明

---

版本：1.0 （2020-08-22）

---

更新功能：

k-scroll-view

• 下拉刷新事件 @onPullDown

• 上拉加载事件 @onPullUp

• 回到顶部方法 goTop()

• 下拉刷新，提供两种加载方式

  1. 原生加载，即：显示头部下拉出现加载圆圈，加载完成之后隐藏

     
     image.png

  2.自定义加载，目前，仅支持自定义文字（后期考虑更多加载样式），可定义的文字有：下拉显示的文字，上拉显示的文字，加载中显示的文字，没有数据显示的文字

---

使用方法：

---

在 script 中引用

import kScrollView from '@/components/k-scroll-view/k-scroll-view.vue';
export default {
  components: {
    kScrollView
  }
}

在 template 中使用组件

    <k-scroll-view
        ref="k-scroll-view"
        :refreshType="refreshType"
        :refreshTip="refreshTip"
        :loadTip="loadTip"
        :loadingTip="loadingTip"
        :emptyTip="emptyTip"
        :touchHeight="touchHeight"
        :height="height"
        :bottom="bottom"
        :autoPullUp="autoPullUp"
        @onPullDown="handlePullDown"
        @onPullUp="handleLoadMore"
    >
        <!-- 数据列表 -->
        <view v-for="item in list" :key="item">{{ `item${item}` }}</view>
    </k-scroll-view>

---

属性说明

属性名	类型	默认值	说明
refreshType	String	native	可选值为[‘native’,'custom'],其中native为原生样式，表现为顶部下拉的圆圈，custom为自定义样式，表现为自定义下拉上拉显示的文字
refreshTip	String	正在下拉	页面下拉，但是还没达到指定值时，显示的文字
loadTip	String	获取更多数据	页面上拉，但是还没达到指定值时，显示的文字
loadingTip	String	正在加载中...	页面下拉/上拉，达到指定值释放之后，显示的文字
emptyTip	String	没有更多数据了...	页面上拉，加载不到数据之后，显示的文字
touchHeight	Number	50	页面上拉/下拉，达到该数值时显示释放加载/释放刷新，然后调用对应的监听对应的刷新或者加载的方法
height	Number	0	该高度为滚动区的高度，可自行设置，默认获取页面显示区（windowHeight）的高度
bottom	Number	50	距离底部的高度为该数值时，执行加载方法，保证一直加载，知道没有数据，该属性需要和 autoPullUp配合使用
autoPullUp	[String,Boolean]	true	是否自动加载更多，配合 bottom属性使用，可以在滚动区即将到底时执行加载更多的方法，避免等待

---

事件说明

事件名	参数	说明
@onPullDown	function(config){ }	下拉刷新的事件监听，事件返会一个函数参数，该函数用来在执行完下拉刷新的方法之后，关闭刷新的提示
@onPullUp	function(config){ }	上拉加载刷新的事件监听，事件返会一个函数参数，该函数用来在执行完加载的方法之后，关闭加载的提示，其中，config 为 {}对象，该对象传值{isEnd:true}，代表已经没有更多数据

---

方法说明

方法名	参数	说明
goTop()	fthis.$refs['k-scroll-view'].goTop()	组件自带回到顶部的按钮，当然您也可以手动执行

demo 使用案例

<template>
    <k-scroll-view
        ref="k-scroll-view"
        :refreshType="refreshType"
        :refreshTip="refreshTip"
        :loadTip="loadTip"
        :loadingTip="loadingTip"
        :emptyTip="emptyTip"
        :touchHeight="touchHeight"
        :height="height"
        :bottom="bottom"
        :autoPullUp="autoPullUp"
        @onPullDown="handlePullDown"
        @onPullUp="handleLoadMore"
    >
        <!-- 数据列表 -->
        <view v-for="item in list" :key="item">{{ `item${item}` }}</view>
    </k-scroll-view>
</template>

<script>
import kScrollView from '@/components/k-scroll-view/k-scroll-view.vue';
export default {
    components: {
        kScrollView
    },
    data() {
        return {
            refreshType: 'native',
            refreshTip: '正在下拉',
            loadTip: '获取更多数据',
            loadingTip: '正在加载中...',
            emptyTip: '没有更多数据了...',
            touchHeight: 50,
            height: 0,
            bottom: 50,
            autoPullUp: true,
            list: []
        };
    },
    onLoad() {
        this.list = [];
        for (var i = 0; i < 20; i++) {
            this.list.push(i);
        }
    },
    methods: {
        handlePullDown(stopLoad) {
            this.list = [];
            for (var i = 0; i < 10; i++) {
                this.list.push(i);
            }
            stopLoad ? stopLoad() : '';
        },
        handleLoadMore(stopLoad) {
            console.log('到我了');
            console.log(stopLoad);
            const size = this.list.length;
            if (size < 100) {
                const list = [];
                for (var i = 0; i < 10; i++) {
                    list.push(size + i);
                }
                this.list = this.list.concat(list);
                stopLoad ? stopLoad() : '';
            } else {
                stopLoad ? stopLoad({ isEnd: true }) : '';
            }
        },
        handleGoTop() {
            this.$refs['k-scroll-view'].goTop();
        }
    }
};
</script>

<style>
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
</style>

demo 使用案例 预览图

下拉刷新，上拉加载.gif