uni-app 首次加载默认值不对

发布于 1周前 作者 itying888 来自 Uni-App

uni-app 首次加载默认值不对

代码示例

initScroll() {
    this.scroll_left = this.number * Math.round((this.scroll.detail.scrollWidth - this.screenWidth) / this.max)
    console.log(this.scroll_left)
}

首次执行这个为NAN，也就是说，默认值只能为0，你设置成其默认值，滚动条根本无法滚动到指定位置，位置都不对。

没有滚动的情况下，你的scroll对象里根本就没有scrollWidth属性啊，this.scroll.detail.scrollWidth


Harmonyos Next教程
1 回复

在处理 uni-app 首次加载默认值不对的问题时，通常我们需要确保数据在页面渲染前已正确初始化。以下是一些常见的场景和解决方案，包括如何在 uni-app 中正确设置和初始化默认值。

场景一：页面数据未正确初始化

假设我们有一个页面，需要在页面加载时显示一些默认数据。如果这些数据没有正确初始化，可能会导致显示不正确。

解决方案

在页面的 data 函数中初始化数据：

<template>
  <view>
    <text>{{ user.name }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '默认用户名',
        age: 18
      }
    };
  },
  onLoad() {
    // 模拟异步数据加载
    setTimeout(() => {
      this.user = {
        name: '实际用户名',
        age: 25
      };
    }, 1000);
  }
};
</script>

在这个例子中，即使异步数据加载需要一些时间，页面首次加载时仍会显示默认值。

场景二：组件属性未传递默认值

如果我们在组件中使用属性，并且这些属性没有传递默认值，也可能导致显示不正确。

解决方案

在组件中设置属性的默认值：

<!-- MyComponent.vue -->
<template>
  <view>
    <text>{{ title }}</text>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '默认标题'
    }
  }
};
</script>

使用组件时，即使未传递 title 属性，组件也会显示默认值：

<!-- ParentPage.vue -->
<template>
  <view>
    <my-component></my-component>
    <my-component title="自定义标题"></my-component>
  </view>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
</script>

场景三：存储数据未正确读取

如果数据存储在本地存储（如 localStorage 或 uni.setStorageSync）中，并且在页面加载时未正确读取，也可能导致显示默认值不正确。

解决方案

在页面加载时读取存储数据：

onLoad() {
  const storedUser = uni.getStorageSync('user') || { name: '默认用户名', age: 18 };
  this.user = storedUser;
}

这段代码确保了如果从存储中读取的数据不存在，将使用默认值。

通过上述方法，我们可以确保 uni-app 在首次加载时显示正确的默认值。

回到顶部