uniapp实现长列表滚动分页功能_uni-app滚动分页

    <scroll-view style="height: 100vh;margin-top: 22rpx;" scroll-y @scrolltolower="scrolltolowerFnc">
         
                    <view v-for="item in itemsList">
                      {{item.name}}
                    </view>
          
                <Empty v-if="itemsList.length==0" :title="'暂无数据 ...'" />
            </scroll-view>

引入接口：

    import {
        allianceList
    } from '@/api/system/alliance';

data数据：

itemsList: [],

params: {
                    page: 1,
                    limit: 10
                },

goodScroll: false,

方法：

getIndexNewList() {
                allianceList(this.params).then(res => {
                    let data = res.data
                    this.goodScroll = data.list.length < this.params.limit
                    this.params.page++
                    this.itemsList = [...this.itemsList,...res.data.list]
                    //console.log(this.itemsList)
                });
            },

触底方法：

scrolltolowerFnc() {
                console.log("触底了")
                if (this.goodScroll) return
                this.getIndexNewList();
            }