uniapp+uview触底加载更多信息，uniapp分页

<template>
    <view class="collect">
        <view class="" style="background-color: #FFFFFF; height:20rpx; width: 100%;"></view>
            <view class="news" v-for="(item, index) in list" :key="index">
                <!-- <image class="img" src="../../static/image/xinxi.png" mode=""></image> -->
                <view class="newsRight">
                    <view class="tips">系统消息</view>
                    <view class="time hui">{{ item.addTime }}</view>
                    <!-- <view class="icon">1</view> -->
                </view>
                <view class="newszhong">
                    <view class="content hui">[{{ item.message }}]</view>
                </view>
            </view>
                <!-- // 加载状态  uview-->
            <u-loadmore :status="finished" />
            <view class="" style="height: 150rpx;">
                
            </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            listQuery: {
                page: 1,
                limit: 10
            },
            total:1,
            finished: 'nomore',    // 加载状态
        };
    },
    onShow() {
    
        // 清空列表
        this.list=[]
        this.getList();
        
    },
    // 触底加载更多
    onReachBottom() {
        console.log(this.finished)
             console.log(this.listQuery.page)
             if (this.listQuery.page >= this.total) {
                 console.log('1111')
                 this.finished = 'nomore'; //已经滑到底的提醒
                 return false;
             }else{
                 this.listQuery.page++;
                 this.getList();
                 }
           },
    methods: {
        // 获取页面内容
        getList: function() {
        
            this.$ajax({
                url: '/teacher/notify/selectAllNotify?staffId=' + this.user.staffId + '&pageNum=' + this.listQuery.page + '&pageSize=' + this.listQuery.limit,
                method: 'GET'
            }).then(data => {
                
                    console.log(data);
                    
                    let dataBackups = data.data.list;
                    if(dataBackups.length>0){
                        //         3                9/3
                        this.total = Math.ceil(data.data.total / this.listQuery.limit);
                        // console.log(this.total)
                        // 拼接数组
                        this.list = this.list.concat(dataBackups);
                        // 加载状态
                        this.finished='loading'
                        if (this.listQuery.page >= this.total) {
                            this.finished = 'nomore';
                        }
                    }else{
                        this.finished = 'nomore';
                    }
            });
        },
    }
};
</script>

<style scoped>
.traceDate {
    margin: 30rpx;
}
.cardBottom {
    display: flex;
    justify-content: space-between;

    height: 70rpx;
    line-height: 70rpx;
}
.poputop {
    display: flex;
    justify-content: space-between;
    width: 400rpx;
    margin: 0 auto;
    padding: 20rpx;
    padding-left: 40rpx;
    padding-right: 40rpx;
}
.cimage {
    background-color: #c0c0c0;
    width: 100rpx;
    height: 100rpx;
}
.wiht {
    width: 100rpx;
    /* height: 100rpx; */
    text-align: center;
    line-height: 50rpx;
}
.imga {
    width: 80rpx;
    height: 80rpx;
}

.news {
    margin: 20rpx 0 20rpx 0;
    overflow: hidden;
    padding: 20rpx;
    background-color: #ffffff;
    border-bottom: 1rpx solid #dedede;
    line-height: 50rpx;
}
.tips {
    float: left;
    color: #f1a334;
}
.hui {
    color: #c0c0c0;
}
.img {
    margin-top: 15rpx;
    width: 80rpx;
    height: 60rpx;
    display: block;
    float: left;
}
.newszhong {
    margin-left: 20rpx;
}
.newsRight {
    position: relative;
    overflow: hidden;
}
.icon {
    width: 30rpx;
    height: 30rpx;
    background-color: red;
    text-align: center;
    color: #ffffff;
    border-radius: 50%;
    line-height: 30rpx;
    position: absolute;
    bottom: -40rpx;
    right: 10rpx;
}
.time {
    float: right;
}
</style>