若依移动端Ruoyi-App——开发通知公告解决上拉onReachBottom失效

背景： 若依移动端Ruoyi-App——使用uview2.0开发通知公告_鲸鱼姐的博客-CSDN博客

上一篇实现了使用uview2.0开发通知公告，在微信小程序运行时，发现上拉onReachBottom失效、

	onReachBottom()    //移动端——监听上拉触底动作{console.log("onReachBottom==="+this.params.pageNum+"==="+this.params.pageSize+"==="+this.total)if(this.params.pageNum * this.params.pageSize >= this.total){this.status="noMore"this.$modal.msgSuccess('Bottom=没有更多数据了')}else{this.status="loading"this.$modal.msgSuccess('Bottom=getNoticeData')this.params.pageNum += 1;this.getNoticeData();}},methods: {...}

解决办法

1. pages.json 添加onReachBottomDistance

注意在微信小程序运行时，需要同时添加    "style": "v2"

	 {"path": "pages/feedback/list_notice/list_notice","style": {"navigationBarTitleText": "通知公告","style" :{"onReachBottomDistance": 300,"enablePullDownRefresh" :true,"backgroundColor" :"#F8F8F8"},"style": "v2"}}

2. 设置overflow样式后，onReachBottom钩子不触发，去除overflow后，可触发

.page-notification{
    padding: 40rpx;
    height: calc(100vh - 88rpx);
    //overflow: hidden;
    .u-list{
        height: calc(100vh - 68rpx)!important;
    }
}

3. 触发onReachBottom需要滚动条

注意：一定要第一页显示内容超过微信屏幕（可调整内容或者页面高度）

（1）页面高度超过屏幕（出现滚动条）时才可能触发onReachBottom事件。这倒也符合直觉，因为如果页面高度都没有超过屏幕，更新内容应该直接出现在屏幕剩下的部分，不需要上拉触发更新。

原高度：calc(100vh - 268rpx)!important;

.page-notification{
    padding: 40rpx;
    height: calc(100vh - 88rpx);
    //overflow: hidden;
    .u-list{
        height: calc(100vh - 268rpx)!important;
    }
}

调整后： height: calc(100vh - 68rpx)!important;

.page-notification{
    padding: 40rpx;
    height: calc(100vh - 88rpx);
    //overflow: hidden;
    .u-list{
        height: calc(100vh - 68rpx)!important;
    }
}

(2) 如果仍然无效，可将每页的条数扩充到20，覆盖全屏。

      params: {
        pageNum: 0,
        pageSize: 20
      },