更新记录

1.0.0（2022-02-10） 下载此版本

通过组件的形式实现列表数据加载

平台兼容性

uni-app

通过组件的形式实现列表数据加载

示例代码

<template>
    <view>
        <from-list-loading ref='list' :listData.sync="listData" @succeed="succeed">
            <view v-for="(item,index) in listData" :key="index">
                <view class="text as-layout-vertical">list - {{item}}</view>
            </view>
        </from-list-loading>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                listData: []
            }
        },
        onLoad() { //会序列化上个页面传递的参数

        },
        onUnload() { //监听页面销毁

        },
        onPullDownRefresh() { //监听用户下拉动作
            this.$refs.list.pullToRefresh()
        },
        onReachBottom() { //页面滚动到底部的事件
            this.$refs.list.pullOnLoading()
        },
        methods: {
            succeed(data){
                this.listData = data
            }
        }
    }
</script>

<style>
    .text {
        margin: 2rpx 0;
        width: 100%;
        background-color: #fff;
        height: 120rpx;
        line-height: 120rpx;
        text-align: center;
        color: #555;
        border-radius: 8rpx;
    }
</style>