若依移动端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
      },