uniapp onReachBottom无效

这是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无效？作为一个后端写前端真头大

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

• 以下回答由chatgpt基于相关博客总结生成:

  根据参考资料和问题描述，可以看出在uniapp中使用onReachBottom方法遇到了问题。根据段落1中的代码，我们可以得出以下结论和解决方案：

  1. onReachBottom是uniapp提供的页面生命周期函数，用于监听页面滚动到底部的事件。
  2. 在pages.json文件中配置页面的时候，可以指定触发onReachBottom方法的距离，比如定义onReachBottomDistance为50，在滚动到离页面底部50px时触发onReachBottom事件。
  3. 在onReachBottom方法中，可以编写相应的逻辑来处理下拉加载更多数据的操作。
  4. 在示例代码中，通过判断数据的总条数和当前页数来确定是否还有更多数据可加载，当pageNum * pageSize大于等于总条数时表示没有更多数据，此时可以通过uni.showToast方法提示用户，并在一定时间后隐藏加载中的提示。如果还有数据可加载，则根据pageNum的值递增，并调用getList方法来获取新的数据。
  5. getList方法使用indexListData方法来获取数据，通过传递{ pageNum, pageSize }作为参数进行请求，请求成功后根据返回的数据更新dataList和total的值。

  根据以上分析，可以按以下方式来修改问题中的代码：

  // 相关的.html文件
  <template>
    <view>
      <view class="dataInfo">
        <view class="list" v-for="(item, index) in dataList" :key='index'>
          <text>{{index}}</text>
          <text>{{item}}</text>
        </view>
      </view>
    </view>
  </template>
  
  // 相关的.js文件
  <script>
    import {
      indexListData,
    } from '@/api/index.js';
  
    export default {
      data() {
        return {
          dataList: [],
          total: null,
          data: {
            pageNum: 1,
            pageSize: 5,
          }
        }
      },
      mounted() {
        this.getList();
      },
      methods: {
        getList() {
          indexListData(this.data).then(res => {
            if (res.rows) {
              this.dataList = [...this.dataList, ...res.rows];
            }
            this.total = res.total;
          })
        },
        onReachBottom() {
          // 当数组里的数据大于等于total的时候，说明数据已经加载完了
          if (this.dataList.length >= this.total) {
            setTimeout(() => {
              uni.showToast({
                title: '没有更多数据了',
                icon: 'none',
                duration: 1000
              });
              uni.hideLoading();
            }, 500);
          } else {
            // 每次上拉加载的数据比上一次多十个
            this.data.pageNum++;
            uni.showLoading({
              title: '加载中'
            });
            this.getList();
            setTimeout(() => {
              uni.hideLoading();
            }, 500);
          }
        },
      }
    }
  </script>
  

  请测试以上代码修改是否能解决该问题。