若依移动端Ruoyi-App——开发通知公告解决上拉onReachBottom失效
使用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
},
更多推荐
所有评论(0)