vantui上拉刷新

<!--搜索结果 qhy 2022年01月26日-->
<template>
    <div class="mycontent">
            <!-- 加载 -->
            <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh" class='content'>
                <!-- 空数据 -->
                <div v-if="finished && !lists.length" class="data-occupancy data-occupancy-center">
                    <dl>
                        <dt><img src="~@/../static/img/null-data.png" alt=""></dt>
                        <dd>暂无内容</dd>
                    </dl>
                </div>
                <!-- 上拉加载 -->
                <van-list v-else v-model="isLoading" :finished="finished" :finished-text="'已经到底部啦~~'" loading-text="正在加载中..." error-text="加载失败，请重试" @load="getData()">
                    <div class="new" v-for="(item,index) in lists" :key="index">
                        <div class="title">{{item.title.replace(/#b/g,'')}}</div>
                        <div class="date">{{item.createTime | filterDate}}</div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
</template>

<script>
import Util from "@/api/util.js";
export default {
    data() {
        return {
            keyword: '',
            placeholder: '',
            query: {
                pageSize: 10,
                pageNumber: 1,
            },
            lists: [],
            // vant控件上拉加载更多，下拉刷新功能
            isDropDown: false, // 在进行下拉
            refreshLoading: false, // 下拉刷新完成
            finished: false, // 数据是否加载完成
            isLoading: false,
        }
    },
    created() {
        this.search()
    },
    methods: {
        // 关键字搜索，如果没有关键字，那么使用placeholder当关键字
        search() {
            if (!this.keyword) {
                this.keyword = this.placeholder
            }
            this.query.pageNumber = 1; // 当前页
            this.finished = false; // 未全加载完
            this.lists = []
            this.isLoading = true;
            this.getData()
        },
        // 下拉刷新
        onRefresh() {
            this.search()
        },
        // 搜索
        async getData() {
            this.refreshLoading = false
            if (!this.keyword) {
                this.finished = true
                return;
            }
            var url = "front/edu-article/getEduArticsleByName"
            var obj = {
                articleName: this.keyword,
                current: this.query.pageNumber,
                size: this.query.pageSize,
            }
            // Util.showLoading();
            this.isLoading = true
            var data = await Util.post(url, obj)
            // Util.hideLoading();
            this.isLoading = false;
            if (this.isDropDown) this.refreshLoading = false;
            if (data.status == '200') {
                var mylists = data.data.records
                // 合并页数
                if (this.query.pageNumber == 1) {
                    console.log(mylists)
                    this.lists = mylists
                } else {
                    this.lists = [...this.lists, ...mylists]
                }
                if (this.query.pageNumber >= data.data.pages) {
                    this.finished = true; // 加载完成
                }
                this.query.pageNumber++
                console.log(this.lists)
            }
        },
        //返回上一页，如果没有上一页，那么返回主页
        goBack() {
            this.$router.go(-1)
        }
    },
    filters: {
        filterDate(value) {
            if (value) value = value.split(" ")[0]
            return value
        }
    },
}
</script>

<style lang="scss" scoped>
.mycontent {
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    &:before {
        content: '';
        display: table;
    }
    .center {
        background: #fff;
        margin-top: 0.88rem;
        padding-top: 0.3rem;
        .search {
            margin-left: 0.55rem;
            width: 6.4rem;
            height: 0.76rem;
            border: 1px solid #dcdcdc;
            border-radius: 1rem;
            background: #fbfbfb;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 0.3rem;
            padding-right: 0.3rem;
            input {
                width: 5.2rem;
                border: none;
                font-size: 0.28rem;
                outline-width: 0px;
                border-style: none;
                text-shadow: none;
                outline-color: transparent;
                box-shadow: none;
                background: #fbfbfb;
            }
            img {
                cursor: pointer;
                width: 0.42rem;
                height: 0.42rem;
            }
        }
    }
}
.content {
    padding: 0 0.3rem;
    height: calc(100vh - 2rem);
    overflow-y: scroll;
    .new {
        position: relative;
        padding: 0.3rem 0 0.59rem 0;
        border-bottom: 1px solid #dcdcdc;
        .title {
            font-size: 0.34rem;
            line-height: 0.51rem;
        }
        .date {
            position: absolute;
            bottom: 0.16rem;
            right: 0;
            font-size: 0.24rem;
            color: #999;
        }
    }
    // .new:last-child{
    //     border-bottom: 0
    // }
}
</style>