uni-app,实现上拉分页onReachBottom不生效问题

uni-app,实现上拉分页onReachBottom不生效问题_第1张图片

// pages.json中设置onReachBottomDistance【页面上拉触底事件触发时距页面底部距离,单位只支持px,默认50】
        {
            "path": "pages/test",
            "style": {
                "navigationBarTitleText": "测试页面",
                "onReachBottomDistance": 100
            }
        },     
//pages/test
  onLoad() {
  },
  //监听页面刷到底 ,触底以后调用接口
  onReachBottom() {
    // 触底打印
    console.log('触底')
    // 请求加载
    uni.showLoading({
      title: '加载中'
    });
    
      // 模拟动态添加数据
    setTimeout(() => {
      this.storeList.push({
        id: "22",
        text: "listSSS",
        status: 3,
        statusName: "测试任务",
      })
      console.log(this.storeList)
      uni.hideLoading();
    }, 3000);
  },

uni-app,实现上拉分页onReachBottom不生效问题_第2张图片
问题:
无论滚动到最下面依然没有数据,没有进方法onReachBottom
解决方案:
查到原因是:以前把body的高度设置了height:100%,导致无法监听滚动到底部!!
uni-app,实现上拉分页onReachBottom不生效问题_第3张图片
修改body

body {
  height: auto;
}

再次测试,成功
uni-app,实现上拉分页onReachBottom不生效问题_第4张图片

你可能感兴趣的:(移动和小程序混合开发,uni-app,javascript,前端)