更新记录

1.2.2（2024-05-31）

更新使用示例

1.2.1（2024-05-24）

更新使用文档

1.2.0（2024-05-17）

可以自定义加载的loading的图片 <zf-loadMore-box :isMore="isMore" :text="text" @getMore="getMore" :loadUrl="loadUrl">

平台兼容性

zf-loadMore-box

如果该插件对您有帮助，麻烦收藏评价鼓励一下作者

props参数说明

使用示例

<template>
    <view class="content">
        <view style="background-color: aqua;color:#fff;margin-top: 20rpx;padding:20rpx;border-radius: 8rpx;" v-for="item in list">{{item<10?'0'+item:item}}</view>
        <zf-loadMore-box :loadUrl='loadUrl' :isMore="isMore" :text="text" @getMore="getMore"></zf-loadMore-box>
    </view>
</template>

<script setup>
    import {ref} from 'vue'
    import loadUrl from'../../images/loading.jpg'
    const text = ref("加载更多...")
    const list = ref([])
    for(let i =0;i<40;i++){
        list.value.push(i+1)
    }
    // 是否还有更多数据
    const isMore = ref(true)
    // 判断是否触发了getMore方法，如果触发了在请求结束前只能触发一次
    const onceTrue = ref(true)
    const getMore = (e)=>{
        // 如果触发过了，同一时间只能触发一次
        if(!onceTrue.value){return}
        onceTrue.value = false
        let len = list.value.length
        // 模拟调用接口
        setTimeout(()=>{
            if(len>=80){
                setTimeout(()=>{
                    text.value = '暂无更多'
                    isMore.value = false
                    // 恢复可以触发getMore
                    onceTrue.value = true
                },100)
                return
            }
            for(let i = 0;i<20;i++){
                list.value.push(len+i+1)
            }
            // 恢复可以触发getMore
            onceTrue.value = true
        },2000)
    }
</script>