uniapp onReachBottom无效

Question

这是pages.json

{
    "pages": [
        {
            "path": "pages/home/home",
            "style": {
                "navigationBarTitleText": "首页"
            }
        },
        {
            "path": "pages/category/category",
            "style": {
                "navigationBarTitleText": "分类"
            }
        },
        {
            "path": "pages/plant/list",
            "style": {
                "navigationBarTitleText": "列表"
            }
        },
        {
            "path":"pages/plant/detail",
            "style": {
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "#FFF",
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#FFF",
        "onReachBottomDistance":100,
        "backgroundColor": "#FFF",
        "app-plus": {
            "background": "#FFF",
            "titleNView":false
        }
    },
    
    // 配置tabbar导航栏
    "tabBar": {
        "borderStyle": "#FFF",
        "selectedColor": "#16811D",
        "backgroundColor":"#FFF",
        "color": "#999999",
        "list": [
            {
                "pagePath": "pages/home/home",
                "iconPath": "static/icon/img/home.png",
                "selectedIconPath": "static/icon/img/home-check.png",
                "text": "首页"
            },{
                "pagePath": "pages/category/category",
                "iconPath": "static/icon/img/category.png",
                "selectedIconPath": "static/icon/img/category-check.png",
                "text": "分类"
            },{
                "pagePath": "pages/plant/list",
                "iconPath": "static/icon/img/list.png",
                "selectedIconPath": "static/icon/img/list-check.png",
                "text": "列表"
            }
        ]
    }
    

}

这是页面

<template>
    <view class='plant-list-tabber'>
        <view class='plant-search'>
            <!-- <uni-easyinput v-model="plantName" focus placeholder="自定义样式" @input="input"
                                   :styles="styles" :placeholderStyle="placeholderStyle" /> -->
        </view>
        <view class='plant-list-wapper'>
            <view @click="openDetail(plant.plantId)" class='plant-list-content' v-for='plant in plants' >
                <view class='plant-list-img'>
                    <img :src='"http://localhost/dev-api"+plant.img' />
                </view>
                <view class='plant-list-text'>
                    <view class='plant-name'>{{plant.plantName}}</view>
                    <view class='plant-subject-attribute'>
                        <view>{{plant.subjectName}}</view>
                        <view style="margin-left: 10px;">{{plant.attributeName}}</view>
                    </view>
                    <view style="color:darkgrey">{{plant.distributionName}}</view>
                    <view style="width: 100%;height: 10px;"></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default{
        data(){
            return {
                plants:[],
                placeholderStyle: "color:#499721;font-size:16px",
                styles: { color: 'blue',borderColor: 'green' },
                pageNo:1,
                pageSize:10,
                pageCount:0,
                param:{},
            }
            
        },
        onLoad() {
            this.getList();
        },
        onReachBottom(){
            alert(1);
        },
        methods:{
            getList(){
                let that = this;
                uni.request({
                    url:"http://192.168.0.105:2090/wechat/applet/plant/list",
                    method:"POST",
                    data:{
                        pageNo:that.pageNo,
                        pageSize:that.pageSize,
                        param:that.param
                    },
                    success:function(result){
                        if(result.data.code == 200){
                            that.plants = result.data.data.datas;
                        }
                    },
                    error:function(error){
                        console.log('错误信息',error);
                    }
                    
                })
            },
            openDetail(plantId){
                uni.navigateTo({
                    url:'../plant/detail?plantId='+plantId,
                    fail (error) {
                        console.log('错误信息');
                        console.log(error)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .plant-list-tabber{
        width: 100%;
        height: 100%;
        background-color: #FFF;
    }
    
    .plant-list-wapper{
        width: 100%;
        height: 100%;
    }
    
    .plant-list-wapper{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
    }
    
    .plant-list-content{
        width: 48%;
        height: auto;
        padding: 0px 1%;
    }
    
    .plant-list-img{
        width: 100%;
        height: 100px;
    }
    
    img{
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      border-radius: 20px;
    }
    
    .plant-list-text{
        width: 90%;
        height: auto;
        padding: 0px 10%;
    }
    
    .plant-name{
        font-weight: bold;
        line-height: 25px;
        color:rebeccapurple;
    }
    
    .plant-subject-attribute{
        display: flex;
        justify-content: left;
        color: darkgrey;
    }
</style>

为什么onReachBottom无效？作为一个后端写前端真头大

Answer 1

1. 页面滚动条未滚动到底部：只有当页面滚动条滚动到底部时，onReachBottom 才会触发。
2. 滚动区域不正确：如果页面中存在多个可滚动区域（如多个 scroll-view 组件），则 onReachBottom 只会在最后一个可滚动区域滚动到底部时触发。因此，页面包含多个可滚动区域，并且在其中一个区域滚动到底部时触发 onReachBottom，则需要确保监听的是正确的可滚动区域。
3. 页面高度不足：如果页面的高度不足以滚动到底部，则 onReachBottom 不会触发。