更新记录

2.2（2020-09-16）

修复了滑动到底部，上拉加载失灵的 bug

2.1（2020-09-09）

新增：属性stopPullDown，用来禁用 下拉刷新 修复：下拉/上拉之后，点击页面会执行 下拉刷新/上拉加载的 bug

2.0（2020-08-31）

修复上拉下拉出现的bug,使上拉下拉更流畅 重写上拉下拉的加载样式

平台兼容性

作者的话

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

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

插件地址

Dcloud 插件市场：

功能说明：

k-scroll-view

• 下拉刷新事件 @onPullDown
• 上拉加载事件 @onPullUp
• 回到顶部方法 goTop()
• 下拉刷新，提供两种加载方式
  1. 原生加载，即：显示头部下拉出现加载圆圈，加载完成之后隐藏
  2. 自定义加载，目前，仅支持自定义文字（后期考虑更多加载样式），可定义的文字有：下拉显示的文字，上拉显示的文字，加载中显示的文字，没有数据显示的文字
     3. 提供自定义禁止下拉，只用上拉加载

使用方法：

在 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>

属性说明

事件说明

方法说明

使用案例

<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"
     :stopPullDown="stopPullDown" @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: 'custom',
            refreshTip: '正在下拉',
            loadTip: '获取更多数据',
            loadingTip: '正在加载中...',
            emptyTip: '--我是有底线的--',
            touchHeight: 50,
            height: 0,
            bottom: 50,
            autoPullUp: true,
            stopPullDown:true, // 如果为 false 则不使用下拉刷新，只进行上拉加载
            list: []
        };
    },
    onLoad() {
        this.list = [];
        for (var i = 0; i < 10; 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) {
            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>