更新记录

1.0.1（2022-09-26） 下载此版本

更新readme

1.0.0（2022-09-25） 下载此版本

插件发布

平台兼容性

l-load-empty-tips

列表加载 及空状态组件，组件名：l-load-empty-tips

使用方式

此组件用于列表页面（购物车列表、商品列表等等）的加载文案提示和无数据提示；

在 template 中使用组件

基本用法

    <view>
        <ul>
            <li v-for="(item, index) in list" :key="index">{{ item }}</li>
        </ul>
        <l-load-empty-tips
            :show="list"
            :isLoading="isLoading"
            :lastLength="lastLength"
            :limit="pageLimit"
            eText="购物车没有商品哦"
            eDesc="快去选点心爱的商品吧"
            lText="我是有底线的"
        ></l-load-empty-tips>
    </view>

    export default {
        data() {
            return {
                        list: 0,
                        pageLimit: 20, 
                        isLoading: false,
                        lastLength: 0 
                    }

            },
    onReachBottom() {
            // 判断每次请求回来的数据数据 和 分页的limit  大小 
        if (this.lastLength === this.pageLimit) {
            this.getList()
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        getList() {
            if (this.isLoading) return
            this.isLoading = true
            setTimeout(() => {
                this.isLoading = false
                this.list += this.pageLimit
            // 模拟某次请求返回的数量小于 this.pageLimit,说明数据已经到底了
                if (this.list > 50) {
                    this.lastLength = 2
                } else {
                    this.lastLength = this.pageLimit
                }
            }, 1000)
        }
    }
    }

属性说明

slot