qiaobi/src/views/moreMessage/components/versionMessage.vue

<template>
    <div class="versionMessage">
        <div class="title">窍笔撰写辅助软件历史更新记录</div>
        <div class="infinite-list-wrapper">
            <ul
                class="list"
                v-infinite-scroll="load"
                infinite-scroll-disabled="disabled">
                <li v-for="item in versionList" :key="item.id" class="list-item">
                    <div class="num">版本号：{{ item.versionNum }}</div>
                    <div class="time">更新日期：{{ item.publishTime }}</div>
                    <div class="remark">
                        <div>更新要点</div>
                        <div v-if="item.remark">{{ item.remark }}</div>
                        <div v-else class="wu">无</div>
                    </div>
                </li>
            </ul>
            <p v-if="loading">加载中...</p>
            <p v-if="noMore">没有更多了</p>
        </div>
    </div>
  
</template>

<script>
export default {
    components: {},
    props: {},
    data () {
        return {
            versionList: [],
            queryParams:{
                current:0,
                size:10,
                status: "3"
            },
            loading: false,
            noMore:false
        }
    },
    watch: {},
    computed: {
        disabled () {
            return this.loading || this.noMore
        }
    },
    mounted() {},
    methods: {
        load () {
            this.loading = true
            this.queryParams.current += 1
            this.$api.getVersionList(this.queryParams).then(response=>{
                if(response.code == 200){
                    this.versionList.push(...response.data.records)
                    if(this.versionList.length == response.data.total){
                        this.noMore = true
                    }
                    this.loading = false
                }
            }).catch(error=>{
                this.loading = false
            })
        }
    },
};
</script>
<style lang="scss" scoped>
.versionMessage{
    width: 50%;
    height: calc(100% - 30px);
    margin: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    box-shadow:  0 0 10px  rgb(102, 102, 102);
    border-radius: 8px;
    padding: 10px 15px;
    text-align: left;
    .title{
        font-size: 18px;
        font-weight: bold;
        width: 100%;
    }
    .infinite-list-wrapper{
        width: 100%;
        overflow:auto;
        height: calc(100vh - 280px);
        div{
            padding: 5px 0;
            font-weight: bold;
        }
        .num{
            color:red;
        }
        .wu{
            color: rgb(170, 163, 163);
            font-size: 15px;
            font-weight: normal;
        }
    }
}
</style>