小程序征集列表的上拉加载和下来刷新

<template>
    <view class="newslist">
        <view class="news_content" v-for="(item, index) in dataList" :key="index" @click="handleNav(item.id)">
            <view class="left_title">
                {{ item.title }}
            </view>
            <img :src="item.img_url" alt="" />
        </view>
    </view>
</template>

<script>
import { findArticleOne } from '../../api/home.js'
import $T from '@/utils/util.js'

export default {
    data() {
        return {
            dataList: [],
            cdnUrl: getApp().globalData.cdnUrl,
            // 请求参数
            currentPage: 1,
            total: 0,
            limit: 10,
            // 是否正在请求数据
            isloading: false
        }
    },
    onLoad() {
        this.findArticleOne()
    },
    onShow() {},
    methods: {
        findArticleOne: function () {
            // 添加数据正在加载的效果
            uni.showLoading({
                title: '加载中'
            })
            let self = this
            findArticleOne({
                page: this.currentPage,
                category_type: 'collect',
                limit: this.limit
            }).then(function (res) {
                uni.stopPullDownRefresh()
                uni.hideLoading()
                const { total, data } = res.data

                self.total = total
                self.dataList = [...self.dataList, ...data]
            })
        },
        handleNav(id) {
            $T.handleNav(id)
        }
    },
    // 声明 onReachBottom 事件处理函数，用来监听页面的上拉触底行为：
    onReachBottom() {
        // 判断数据是否加载完毕     判断是否还有下一页数据
        // 当前的页码值 * 每页显示多少条数据 >= 总数条数
        // pagenum * pagesize >= total
        if (this.currentPage * this.limit >= this.total) return

        // 判断是否正在请求其它数据，如果是，则不发起额外的请求
        if (this.isloading) return
        // 让页码值+1
        this.currentPage = this.currentPage + 1
        // 发请求获取数据
        this.findArticleOne()
    },
    // 监听页面的 onPullDownRefresh 事件处理函数：
    // 下拉刷新的事件
    onPullDownRefresh() {
        // 1. 重置关键数据
        this.currentPage = 1
        ;(this.total = 0),
            (this.isloading = false),
            (this.dataList = []),
            // 2. 重新发起请求
            this.findArticleOne()
    }
}
</script>

<style lang="scss">
.newslist {
    background-color: #f7f7f7;
    padding: 30rpx;

    .news_content {
        padding: 16rpx;
        background: #ffffff;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .left_title {
            overflow: hidden;
            font-size: 32rpx;
            color: #313131;

            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        img {
            flex: 0 0 300rpx;
            height: 138rpx;
        }
    }

    .news_content:not(:first-child) {
        margin-top: 30rpx;
    }
}
</style>