更新记录

1.0.2（2021-11-26） 下载此版本

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

1.0.1（2021-08-31） 下载此版本

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

1.0.0（2021-08-23） 下载此版本

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

1. 自定义加载，可定义的文字有：下拉显示的文字，上拉显示的文字，加载中显示的文字，没有数据显示的文字
2. 提供自定义禁止下拉，只用上拉加载

平台兼容性

作者的话

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

插件地址

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>

属性说明

事件说明

方法说明

使用案例

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