更新记录

1.0.2(2021-11-26) 下载此版本

1.修复插件在某些组件下滚动时会出现抖动的问题

1.0.1(2021-08-31) 下载此版本

  1. 新增代码内手动触发下拉刷新方法
  2. 新增回到顶部方法,自定义是否显示回到顶部按钮

1.0.0(2021-08-23) 下载此版本

初始版本下拉刷新插件,提供两种加载方式

  1. 自定义加载,可定义的文字有:下拉显示的文字,上拉显示的文字,加载中显示的文字,没有数据显示的文字
  2. 提供自定义禁止下拉,只用上拉加载
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.0.0 app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

作者的话


之前的下拉刷新插件无法下拉刷新了,就想着自己写一个,希望能对各位小伙伴们有帮助。

插件地址

Dcloud 插件市场:


功能说明:

zyq-movableRefresh

  • 下拉刷新事件 @refresh
  • 上拉加载事件 @loadMore
  • 滚动事件 @onScroll
  • 代码内触发下拉刷新 runRefresh()
  • 加载完成方法 endLoad()
  • 回到顶部 goTop()
  • 下拉刷新,提供两种加载方式
    1. 自定义加载,可定义的文字有:下拉显示的文字,上拉显示的文字,加载中显示的文字,没有数据显示的文字
    2. 提供自定义禁止下拉,只用上拉加载
    3. 提供手动触发下拉刷新方法
    4. 自定义是否显示回到顶部按钮

使用方法:

在 script 中引用

import movableRefresh from '@/components/zyq-movableRefresh/zyq-movableRefresh.vue'
export default {
  components: {
    movableRefresh
  }
}

在 template 中使用组件

    <movable-refresh
        ref="movableRefresh" 
        :scrollHeight="scrollHeight" 
        :noMore="noMore"
        @refresh="refresh"
        @loadMore="loadMore"
        @onScroll="">
            <view>
                <!-- 数据列表 -->
            </view>
    </movable-refresh>

属性说明

属性名 类型 默认值 说明
scrollHeight Number 100 滚动区域高度,必填
refreshText String 下拉可以刷新 页面下拉,但是还没达到指定值时,显示的文字
refreshReady String 释放立即刷新 页面下拉,达到指定值时,显示的文字
refreshingText String 正在刷新... 页面下拉,达到指定值释放之后,显示的文字
refreshSuccessText String 刷新完成 刷新完成后,回调结束刷新,显示的文字
loadingMoreText String 上拉加载更多 未触底时底部显示的文字
loadingText String 正在加载... 页面上拉,触底加载失显示的文字
noMoreText String 已经到底了 页面触底,到达底部无更多数据,显示的文字
pullHeight Number 40 下拉刷新阈值
noMore Number false 是否还有下一页,true则触底时不再触发loadMore事件
backgroundColor String '#eee' 滚动区域背景色
isRefresh Boolean true 下拉刷新开关
showGoTop Boolean false 是否显示回到顶部按钮,为true且滚动位置超过滚动区域高度时才会显示回到顶部按钮

事件说明

事件名 参数 说明
@refresh function(){ } 下拉刷新的事件监听
@loadMore function(){ } 上拉加载刷新的事件监听
@onScroll function(scrollTop){ } 监听滚动事件,返回参数为滚动位置

方法说明

方法名 参数 说明
runRefresh() this.$refs['movableAreaRefresh'].runRefresh() 代码内调用,手动触发下拉刷新功能
endLoad() this.$refs['movableAreaRefresh'].endLoad() 下拉刷新、上拉加载完成后,调用停止刷新
goTop() this.$refs['movableAreaRefresh'].goTop() 回到顶部方法

使用案例

<template>
    <view>
        <view  :style="{'height':scrollHeight+'px'}" style="overflow: hidden;">
            <movable-refresh ref="movableRefresh" :scrollHeight="scrollHeight" :noMore="noMore" :showGoTop="true"
            @refresh="refresh" @loadMore="loadMore" @onScroll="">
                <view>
                    <view v-for="(item,index) in list" :key="index" style="padding:15px;text-align: center;">
                        {{item}}测试
                    </view>
                </view>
            </movable-refresh>
        </view>
    </view>
</template>

<script>
import movableRefresh from '@/components/zyq-movableRefresh/zyq-movableRefresh.vue'
export default {
    components: {
        movableRefresh
    },
    data() {
        return {
            list: [],
            page: 1,
            scrollHeight: 300,
            noMore: false,
        }
    },
    onLoad() {
        let system = uni.getSystemInfoSync()
        this.scrollHeight = system.windowHeight - system.statusBarHeight - 50
        this.refresh()
    },
    methods:{
        (scrollTop){
            this.scrollTop = scrollTop
        },
        refresh(){
            this.page = 1
            this.noMore = false
            let list = []
            for(let i=0;i<15;i++){
                list.push(i)
            }
            this.list = list
            this.page++
            if(this.$refs.movableRefresh){
                let that = this
                setTimeout(function(){
                    that.$refs.movableRefresh.endLoad()     //刷新结束
                },1000)
            }
        },
        loadMore(){
            if(this.noMore){
                return
            }
            let list = this.list
            let page = this.page
            let that = this
            let start = (page-1)*15
            setTimeout(function(){
                for(let i=0;i<15;i++){
                    list.push(start+i)
                }
                that.page++
                that.list = list
                that.$refs.movableRefresh.endLoad()     //刷新结束
                if(that.page>2){
                    that.noMore = true
                }
            },1000)
        },
    }
}
</script>

隐私、权限声明

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

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

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

许可协议

MIT协议

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