uniapp项目设置页面滚动区域,并且(后端已完成分页的情况下)实现上拉加载更多数据

 <scroll-view scroll-y="true" class="scroll-Y"  @scrolltolower="lower">

        <view>滚动内容区域</view

</scroll-view>

       data里面定义:

                pageNum: 1, //开始页
                pageSize: 10, //步长
                total:'', 

js:

//上拉加载请求数据拼接
            pullDown() {
                uni.showLoading({
                    title: '加载中'
                });
                personalRanking({
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    flag:this.flag,
                }).then(res => {
                    this.rankingList = [...this.rankingList, ...res.data.list]
                    // console.log(res.rankingList,'下拉刷新数据');
                    uni.hideLoading();
                }).catch(err => {
                    uni.hideLoading();
                })
            },

 lower(e) {
                if (this.total >= this.pageNum * this.pageSize) {
                    this.pageNum++
                    this.pullDown()
                } else {
                    uni.showToast({
                        title: '没有更多了',
                        duration: 2000
                    });
                    return
                }
            }, 

样式: 

.scroll-Y{

heigth:1200rpx;

}