问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

uniapp uView 骨架屏导致页面高度报错解决方案?

头像
balabala
    22
    新手上路，请多包涵

    uniapp使用uView的骨架屏导致页面高度报错问题。
    报错信息：TypeError: Cannot read property 'height' of undefined

    <template>
  <view>
    !--引用组件-->
    <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
  </view>
</template>

<script>
  export default {
    data(){
        return {
            loading: true, // 显示骨架屏组件
        }
    },
    onload(){
        getSchoolDetailSpecial(this.paramList).then(res=>{
          if (res.code == 20000) {
              this.loading = false; //关闭骨架屏
          }
        }).catch(err=>{})
    }
  }
</script>

    组件源文件代码片段如下：
    打印出res是个空数组，因此找不到res【0】【0】.height
    <u-skeleton>组件源文件代码片段

    uniappuview骨架屏typeerror
    阅读 1.2k
    avatarAI BotBETA

    从您提供的信息来看，报错信息“TypeError: Cannot read property 'height' of undefined”表明在尝试访问一个未定义对象的height属性时出现了问题。根据您提供的代码片段和描述，问题可能出在<u-skeleton>组件内部，当getSchoolDetailSpecial(this.paramList)返回的结果为空数组时，组件试图访问res[0][0].height，但res是空数组，因此res[0]是undefined，进而尝试访问undefined的height属性时产生了错误。

    为了解决这个问题，您可以在组件内部添加检查以确保res数组不为空，并且res[0]和res[0][0]都存在，然后再尝试访问height属性。以下是您可以考虑的实现方式：

    1. 在组件的源代码中找到访问res[0][0].height的部分。
    2. 在访问height属性之前，添加检查以确保res、res[0]和res[0][0]都是存在的。

    例如：

    // 伪代码，具体实现取决于组件的源代码
if (res && res.length > 0 && res[0] && res[0].length > 0) {
  // 现在可以安全地访问 res[0][0].height
  var height = res[0][0].height;
  // ... 其他代码
} else {
  // 处理res为空数组或res[0]为空数组的情况
  // 可以设置一个默认值，或者抛出一个错误，或者执行其他适当的操作
}

    请注意，由于您没有提供<u-skeleton>组件的完整源代码，上述解决方案是一个通用的建议。您可能需要根据组件的实际实现情况进行适当的调整。

    此外，为了避免页面加载时出现高度报错的问题，您还可以在<u-skeleton>组件的模板中添加条件渲染，以确保只在res数组中有有效数据时才渲染相关的高度信息。这可以通过使用v-if指令来实现。

    <template>
  <view>
    <u-skeleton v-if="loading && schoolDetail" :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
    <!-- 其他内容 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        loading: true,
        schoolDetail: null, // 用于存储从学校详细信息的API调用中获取的数据
      };
    },
    onload() {
      getSchoolDetailSpecial(this.paramList).then(res => {
        if (res.code == 20000) {
          this.schoolDetail = res.data; // 假设数据存储在res.data中
          this.loading = false;
        }
      }).catch(err => {});
    },
  };
</script>

    在上面的代码中，v-if="loading && schoolDetail"确保了只有当loading为true且schoolDetail存在时，<u-skeleton>组件才会被渲染。这样，当res数组为空时，组件将不会被渲染，从而避免了高度报错的问题。同时，当数据成功加载后，您需要将schoolDetail设置为相应的数据，并将loading设置为false，以正确显示页面内容。

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题