清晰适配小程序自定义顶部栏，让你驰骋创意星空！

2023-12-24 00:35:07

自适应顶部导航栏：提升 UniApp 小程序用户体验

导言

打造用户体验良好的小程序离不开对细节的关注，其中自适应顶部导航栏至关重要。它可以确保小程序在不同设备上都呈现出美观、统一的效果。本文将深入探讨如何在 UniApp 小程序中实现这一目标，提供详细的步骤和代码示例。

获取设备信息

首先，我们需要获取设备的信息，包括状态栏高度和标题栏高度。UniApp 提供了 uni.getSystemInfo 函数，我们可以使用它来获取这些信息。在 onLoad 生命周期函数中调用此函数，并将获取到的信息存储在数据对象中。

// Page.vue
import uni from '@dcloudio/uni-mp-uni';

export default {
  data() {
    return {
      statusBarHeight: 0,
      titleBarHeight: 0,
    };
  },
  onLoad() {
    uni.getSystemInfo({
      success: (res) => {
        this.statusBarHeight = res.statusBarHeight;
        this.titleBarHeight = res.titleBarHeight;
      },
    });
  },
};

使用 rpx 单位并动态调整

接下来，我们可以在 wxss 文件中使用 rpx 单位来设置顶部导航栏的高度。rpx 是一种自适应单位，它会根据设备的屏幕宽度进行缩放。然后，我们可以使用计算函数来动态调整导航栏的高度，使它适应不同的设备。

// app.wxss
.top-bar {
  height: calc(44px + var(--status-bar-height) + var(--title-bar-height));
}

将信息传递给组件

现在，我们需要将获取到的设备信息传递给自定义的顶部导航栏组件。在应用中使用该组件，并在传递数据对象的同时指定导航栏标题。

// App.vue
<template>
  <TopBar title="我的小程序" />
</template>

<script>
import TopBar from './components/TopBar.vue';

export default {
  components: {
    TopBar,
  },
};
</script>

// TopBar.vue
<template>
  <view class="top-bar">
    <view class="title">{{ title }}</view>
  </view>
</template>

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

代码示例

// Page.vue
import uni from '@dcloudio/uni-mp-uni';

export default {
  data() {
    return {
      statusBarHeight: 0,
      titleBarHeight: 0,
    };
  },
  onLoad() {
    uni.getSystemInfo({
      success: (res) => {
        this.statusBarHeight = res.statusBarHeight;
        this.titleBarHeight = res.titleBarHeight;
      },
    });
  },
};

// app.wxss
.top-bar {
  height: calc(44px + var(--status-bar-height) + var(--title-bar-height));
}

// TopBar.vue
<template>
  <view class="top-bar">
    <view class="title">{{ title }}</view>
  </view>
</template>

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

// App.vue
<template>
  <TopBar title="我的小程序" />
</template>

<script>
import TopBar from './components/TopBar.vue';

export default {
  components: {
    TopBar,
  },
};
</script>