uniapp 上拉加载

上拉加载

uniapp还有一个生命周期函数比较常用:onReachButtom

函数名	说明
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项

测试:

<template>
    <div>
        <view>这里是列表页</view>
        <view v-for="l in list" class="box-h">
            {{l}}
        </view>
    </div>
</template>

<script>
    export default{
        name: 'list',
        components:{},
        data() {
            return {
                list:['JAVA','MYSQL','PYTHON','HTML','JS','TS','GO']
            }
        },
        onPullDownRefresh(){
            console.log('触发了下拉刷新')
            setTimeout(()=>{
                this.list = ['JAVA','MYSQL','PYTHON','HTML','JS','TS','GO','SPRINGBOOT']
                uni.stopPullDownRefresh()
            },2000)
        },
        onReachBottom(){
            console.log('页面触底了')
        }
    }
</script>

<style scoped>
    .box-h{
        height: 100px;
        line-height: 100px;
    }
</style>

离底部还有段距离就触发了，在pages里面可以设置触底距离的

属性	类型	默认值	描述	平台差异说明
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期

页面触底可以做下一页的数据

简单演示一下:

onReachBottom(){
            console.log('页面触底了')
            this.list = [...this.list,...['JAVA','MYSQL','PYTHON','HTML','JS','TS','GO','SPRINGBOOT']]
}