uniapp组件整理之 下拉刷新，上拉加载
作者的话
本人使用uniapp开发H5,小程序，app还是有一段时间了，最近稍微有点时间，整理一下一些常用的组件，重温自己知识的同时，希望能对各位小伙伴们有帮助。
最后：开发不容易，能够帮助到您，是我的荣幸，当然，如果有什么问题，可以留言咱们一起讨论，共同进步！
插件地址
Dcloud 插件市场：自定义下拉刷新，上拉加载，回到顶部
更新说明
版本：1.0 （2020-08-22）
更新功能：
k-scroll-view
下拉刷新事件 @onPullDown
上拉加载事件 @onPullUp
回到顶部方法 goTop()
下拉刷新，提供两种加载方式
原生加载，即：显示头部下拉出现加载圆圈，加载完成之后隐藏
image.png
2.自定义加载，目前，仅支持自定义文字（后期考虑更多加载样式），可定义的文字有：下拉显示的文字，上拉显示的文字，加载中显示的文字，没有数据显示的文字
使用方法：
在 script 中引用
import kScrollView from '@/components/k-scroll-view/k-scroll-view.vue';
export default {
components: {
kScrollView
}
}
在 template 中使用组件
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"
>
属性说明
属性名
类型
默认值
说明
refreshType
String
native
可选值为[‘native’,'custom'],其中native为原生样式，表现为顶部下拉的圆圈，custom为自定义样式，表现为自定义下拉上拉显示的文字
refreshTip
String
正在下拉
页面下拉，但是还没达到指定值时，显示的文字
loadTip
String
获取更多数据
页面上拉，但是还没达到指定值时，显示的文字
loadingTip
String
正在加载中...
页面下拉/上拉，达到指定值释放之后，显示的文字
emptyTip
String
没有更多数据了...
页面上拉，加载不到数据之后，显示的文字
touchHeight
Number
50
页面上拉/下拉，达到该数值时显示释放加载/释放刷新，然后调用对应的监听对应的刷新或者加载的方法
height
Number
该高度为滚动区的高度，可自行设置，默认获取页面显示区（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 使用案例
</p><p>import kScrollView from '@/components/k-scroll-view/k-scroll-view.vue';</p><p>export default {</p><p> components: {</p><p> kScrollView</p><p> },</p><p> data() {</p><p> return {</p><p> refreshType: 'native',</p><p> refreshTip: '正在下拉',</p><p> loadTip: '获取更多数据',</p><p> loadingTip: '正在加载中...',</p><p> emptyTip: '没有更多数据了...',</p><p> touchHeight: 50,</p><p> height: 0,</p><p> bottom: 50,</p><p> autoPullUp: true,</p><p> list: []</p><p> };</p><p> },</p><p> onLoad() {</p><p> this.list = [];</p><p> for (var i = 0; i < 20; i++) {</p><p> this.list.push(i);</p><p> }</p><p> },</p><p> methods: {</p><p> handlePullDown(stopLoad) {</p><p> this.list = [];</p><p> for (var i = 0; i < 10; i++) {</p><p> this.list.push(i);</p><p> }</p><p> stopLoad ? stopLoad() : '';</p><p> },</p><p> handleLoadMore(stopLoad) {</p><p> console.log('到我了');</p><p> console.log(stopLoad);</p><p> const size = this.list.length;</p><p> if (size < 100) {</p><p> const list = [];</p><p> for (var i = 0; i < 10; i++) {</p><p> list.push(size + i);</p><p> }</p><p> this.list = this.list.concat(list);</p><p> stopLoad ? stopLoad() : '';</p><p> } else {</p><p> stopLoad ? stopLoad({ isEnd: true }) : '';</p><p> }</p><p> },</p><p> handleGoTop() {</p><p> this.$refs['k-scroll-view'].goTop();</p><p> }</p><p> }</p><p>};</p><p>
</p><p>.content {</p><p> display: flex;</p><p> flex-direction: column;</p><p> align-items: center;</p><p> justify-content: center;</p><p>}</p><p>
demo 使用案例 预览图
下拉刷新，上拉加载.gif
发表评论 (审核通过后显示评论)：