作者的话

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

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

插件地址

Dcloud 插件市场：https://ext.dcloud.net.cn/plugin?id=2599

下拉刷新上拉加载.jpg

功能说明：

k-scroll-view

• 下拉刷新事件 @onPullDown
• 上拉加载事件 @onPullUp
• 回到顶部方法 goTop()
• 下拉刷新，提供两种加载方式
  1. 原生加载，即：显示头部下拉出现加载圆圈，加载完成之后隐藏
  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>

属性说明

事件说明

方法说明

使用案例

<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: 'custom',            refreshTip: '正在下拉',            loadTip: '获取更多数据',            loadingTip: '正在加载中...',            emptyTip: '--我是有底线的--',            touchHeight: 50,            height: 0,            bottom: 50,            autoPullUp: true,            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>

原著是一个有趣的人,若有侵权,请通知删除