更新记录

1.2.3(2024-06-21) 下载此版本

更新使用说明

1.2.2(2024-05-31) 下载此版本

更新使用示例

1.2.1(2024-05-24) 下载此版本

更新使用文档

查看更多

平台兼容性

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

zf-loadMore-box

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

props参数说明

名称 类型 示例 描述
loadUrl String 'https://2.png' 加载图片
text String 加载更多... 加载提示文字
isMore Boolean true 是否还有更多数据

使用示例

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

隐私、权限声明

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

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

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

许可协议

MIT协议

暂无用户评论。

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