更新记录

2.2(2020-09-16)

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

2.1(2020-09-09)

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

查看更多

作者的话


本人使用uniapp开发H5,小程序,app还是有一段时间了,最近稍微有点时间,整理一下一些常用的组件,重温自己知识的同时,希望能对各位小伙伴们有帮助。
最后:开发不容易,能够帮助到您,是我的荣幸,当然,如果有什么问题,可以留言咱们一起讨论,共同进步!

插件地址

Dcloud 插件市场:


功能说明:

k-scroll-view

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

使用方法:

在 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属性使用,可以在滚动区即将到底时执行加载更多的方法,避免等待
stopPullDown [String,Boolean] true 是否禁用下拉

事件说明

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

方法说明

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

使用案例

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


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();
        }
    }
};

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问