更新记录

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

路径问题

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

微信公众号开发中，需要自定义下拉刷新时，微信浏览器下拉出现页面同时被向下弹性滑动造成下拉异常，此插件解决了这个问题,同时下拉刷新样式尽量与内置下拉刷新保持一致

平台兼容性

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一个动态高度