uni-app ios页面底部显示问题

uni-app ios页面底部显示问题

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.2.3

手机系统：iOS

手机系统版本号：iOS 14

手机厂商：苹果

手机机型：ip11

页面类型：vue

vue版本：vue2

打包方式：云端


示例代码：

this.$nextTick(function() {
uni.pageScrollTo({
scrollTop: 1000,
duration: 10
})
});
页面用的这个显示到底部，为什么有的页面显示不到底部，差一段距离，是只有文字的能用，其他图片或者表情什么不支持这个方法吗

操作步骤：

this.$nextTick(function() {
uni.pageScrollTo({
scrollTop: 1000,
duration: 10
})
});
页面用的这个显示到底部，为什么有的页面显示不到底部，差一段距离，是只有文字的能用，其他图片或者表情什么不支持这个方法吗

预期结果：

this.$nextTick(function() {
uni.pageScrollTo({
scrollTop: 1000,
duration: 10
})
});
页面用的这个显示到底部，为什么有的页面显示不到底部，差一段距离，是只有文字的能用，其他图片或者表情什么不支持这个方法吗

实际结果：

this.$nextTick(function() {
uni.pageScrollTo({
scrollTop: 1000,
duration: 10
})
});
页面用的这个显示到底部，为什么有的页面显示不到底部，差一段距离，是只有文字的能用，其他图片或者表情什么不支持这个方法吗

bug描述：

this.$nextTick(function() {
uni.pageScrollTo({
scrollTop: 1000,
duration: 10
})
});
页面用的这个显示到底部，为什么有的页面显示不到底部，差一段距离，是只有文字的能用，其他图片或者表情什么不支持这个方法吗

示例图片 示例图片 示例图片 示例图片 示例图片


更多关于uni-app ios页面底部显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app ios页面底部显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题通常是由于iOS安全区域（Safe Area）导致的。在iOS设备上，页面底部需要避开Home Indicator区域，uni-app会自动处理安全区域，但有时会影响uni.pageScrollTo的滚动计算。

主要原因：

  1. iOS底部安全区域占用了部分空间
  2. scrollTop值计算时可能没有包含安全区域的高度
  3. 页面内容动态加载导致高度计算不准确

解决方案：

  1. 使用selector替代固定值：
uni.pageScrollTo({
  selector: '#bottom-element',
  duration: 300
})
  1. 计算动态高度：
this.$nextTick(() => {
  const query = uni.createSelectorQuery()
  query.select('.page-content').boundingClientRect()
  query.selectViewport().scrollOffset()
  query.exec((res) => {
    const contentHeight = res[0].height
    const scrollTop = res[1].scrollTop
    uni.pageScrollTo({
      scrollTop: contentHeight + scrollTop,
      duration: 300
    })
  })
})
  1. 调整页面样式： 在pages.json中配置：
{
  "path": "pages/xxx/xxx",
  "style": {
    "app-plus": {
      "safearea": {
        "bottom": {
          "offset": "none"
        }
      }
    }
  }
}
  1. 使用scroll-into-view： 在模板中使用：
<scroll-view scroll-y :scroll-into-view="scrollToId">
  <!-- 内容 -->
  <view id="bottom"></view>
</scroll-view>
回到顶部