更新记录

1.3（2024-12-26） 下载此版本

样式问题

1.2（2024-12-23） 下载此版本

修复一些问题

1.1（2024-12-20） 下载此版本

路径问题

平台兼容性

uni-app

其他

jack-refresh

使用方法

1、在页面中导入并注册

//导入
import Refresh from "@/components/jack-refresh/jack-refresh.vue"
...
//注册组件
components:{Refresh}
...
//使用
<Refresh domName=".list" :refreshing="isRefreshing" @pullDownRefresh="getList" @reachBottom="appendList" :pullThreshold="30"/>

参数说明

事件

使用案例

<template>
    <view class="content">
        <Refresh domName=".list" :refreshing="isRefreshing" @pullDownRefresh="getList" @reachBottom="appendList" :pullThreshold="30"/>
        <view class="list" :style="{height:(list.length>10?'auto':'95vh')}">
            <view class="list_item" v-for="i in list">
                {{i}}
            </view>
        </view>
    </view>
</template>

<script>
    import Refresh from "@/components/jack-refresh/jack-refresh.vue"
    export default {
        data() {
            return {
                list: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                isRefreshing: false,
            }
        },
        onLoad() {

        },
        methods: {
            getList() {
                uni.showLoading({
                    title: '刷新中',
                    mask: false
                });
                this.isRefreshing = true
                this.testApi().then(res=>{
                    this.list = res
                    uni.hideLoading()
                    this.isRefreshing = false
                })
            },
            appendList() {
                uni.showLoading({
                    title: '加载更多',
                    mask: false
                });
                this.isRefreshing = true
                this.testApi().then(res=>{
                    this.list.push(...res)
                    uni.hideLoading()
                })
            },
            testApi() {
                return new Promise((res, err) => {
                    setTimeout(() => {
                        res([2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,,2,2])
                    }, 2000)
                })
            }
        },
        components: {
            Refresh
        }
    }
</script>

<style>
    .list_item {
        margin: 0 auto;
        width: 90%;
        border: 1px solid #ababaa;
        padding: 30rpx 0;
        margin-top: 20rpx;
    }
</style>

注意事项

1、因组件监听的是dom元素的下拉事件，故若开始监听的列表高度为0或较小，可能触发不到，可以使用案例中的方法给list一个动态高度