uniapp+vue3 使用list触底+下拉

点击查看代码

<template>
    <view class="coinCenter">
        <scroll-view
            scroll-y="true"
            :refresher-enabled="true"
            :refresher-triggered="retriggered"
            :style="`height:${scrcvh}px`"
            class="scrv"
            @refresherrefresh="onRefresh"
            @scrolltolower="lower"
        >
            <uni-list class="listpre">
                <uni-list-item v-for="(item, index) in firstList" :key="index">
                    <template v-slot:header>
                        <view>
                            {{ item.source }}
                        </view>
                        <view>过期时间: {{ item.expire_text }}</view>
                    </template>
                    <template v-slot:footer>
                        <view class="expritx">+{{ item.coins }}</view>
                    </template>
                </uni-list-item>
            </uni-list>
        </scroll-view>
    </view>
</template>

<script setup>
import { ref, reactive, nextTick } from 'vue'
import { onLoad, onReady } from '@dcloudio/uni-app'
let app = getApp()
let scrcvh = ref(0)
let retriggered = ref(false)
let isFinished = ref(false)
let firstList = ref([])
let pageNum = ref(1)
let onRefresh = async (e) => {
    retriggered.value = true
    pageNum.value = 1
    isFinished.value = false
    await getDataList()
    retriggered.value = false
}
let lower = async (e) => {
    pageNum.value++
    if (!isFinished.value) {
        await getDataList(1, 15, 'add')
    }
}
let getSysHeight = () => {
    uni.getSystemInfo({
        success: (res) => {
            scrcvh.value = res.windowHeight - 20
        }
    })
}
let getDataList = async (type = 1, limit = 15, isAdd) => {
    try {
        let { data } = await app.globalData.api.index.getList({
            bodyData: {
                m: 'tiktok',
                c: 'Coins',
                a: 'getCoinsLog',
                type,
                page: pageNum.value,
                limit,
                debug_user_id: 728,
                respons_type: 'json'
            }
        })
        if (data.code === 1 && data.data.list.length > 0) {
            if (isAdd === 'add') {
                firstList.value = firstList.value.concat(data.data.list)
            } else {
                firstList.value = data.data.list
            }
        } else {
            isFinished.value = true
            uni.showToast({
                title: '已加载全部'
            })
        }
    } catch (err) {
        //TODO handle the exception
    }
}
onLoad(async () => {
    await getSysHeight()
})
onReady(async () => {
    await getDataList()
})
</script>

<style lang="scss">
.coinCenter {
    display: flex;
    flex-direction: column;
    padding: 20rpx;
}
.scrv {
}
.listpre {
    width: 100%;
    height: 100%;
    background-color: pink;
}
.expritx {
    font-size: 14px;
    font-weight: 600;
    color: #fed861;
}
</style>