uni-app屏幕自适应组件

在手机屏幕中常常要处理不同类型的屏幕，比如异形屏（浏海屏）需要处理好安全区域内容的展示，为此我们来专封装一个组件，在该组件统一进行处理，要求该组件满足：

1. 页面可以滚动
2. 适配安全区域
3. 自定义底部 tabBar 边框线
4. 支持下拉刷新和上拉加载

首先按照 easycom 规范新建组件 scroll-page

1. 使用内置组件 scroll-view 保证页面可以滚动，并且 scroll-view 的高度为视口的高度

<!-- /components/scroll-page.vue -->
<script setup>
  // 读取页面视口的高度
  const { windowHeight } = uni.getSystemInfoSync()
</script>

<template>
  <scroll-view
    :style="{ height: windowHeight + 'px'}"
    scroll-y
  >
    <view></view>
  </scroll-view>
</template>

<style lang="scss"></style>

2.适配安全区域

<!-- /components/scroll-page.vue -->
<script setup>
  // 读取页面视口的高度
  const { windowHeight } = uni.getSystemInfoSync()
</script>

<template>
  <scroll-view :style="{ height: windowHeight + 'px' }" scroll-y>
    <view class="scroll-page-content">
      <slot></slot>
    </view>
  </scroll-view>
</template>

<style lang="scss">
  .scroll-page-content {
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>

3.自定义底部 tabBar 边框线

小程序中底部 tabBar 的边框线只能定义黑色或白色，在开发中非常不实用，我们来给 scroll-page 添加底部边框线的方式来模拟实现 tabBar 边框线的效果。

<!-- /components/scroll-page.vue -->
<script setup>
  // 读取页面视口的高度
  const { windowHeight } = uni.getSystemInfoSync()

  // 自定义组件属性
  const scrollPageProps = defineProps({
    borderStyle: {
      type: [String, Boolean],
      default: false,
    },
  })
</script>

<template>
  <scroll-view
    :style="{
      height: windowHeight + 'px',
      boxSizing: 'border-box',
      borderBottom: scrollPageProps.borderStyle,
    }"
    scroll-y
  >
    <view class="scroll-page-content">
      <slot></slot>
    </view>
  </scroll-view>
</template>

<style lang="scss">
  .scroll-page-content {
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>

4.基于内置组件 scroll-view 实现下拉刷新交互

<script setup>
  // 读取页面视口的高度
  const { windowHeight } = uni.getSystemInfoSync()

  // 自定义组件属性
  const scrollPageProps = defineProps({
    borderStyle: {
      type: [String, Boolean],
      default: false,
    },
    refresherEnabled: {
      type: Boolean,
      default: false,
    },
    refresherTriggered: {
      type: Boolean,
      default: false,
    },
  })

  // 自定义事件
  defineEmits(['refresherrefresh', 'scrolltolower'])
</script>

<template>
  <scroll-view
    :style="{
      height: windowHeight + 'px',
      boxSizing: 'border-box',
      borderBottom: scrollPageProps.borderStyle,
    }"
    scroll-y
    :refresherEnabled="scrollPageProps.refresherEnabled"
    :refresherTriggered="scrollPageProps.refresherTriggered"
    @refresherrefresh="$emit('refresherrefresh', $event)"
    @scrolltolower="$emit('scrolltolower', $event)"
  >
    <view class="scroll-page-content">
      <slot></slot>
    </view>
  </scroll-view>
</template>

<style lang="scss">
  .scroll-page-content {
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>

 自定义组件 scroll-page 本质上就是对内置组件 scroll-view 进行的二次封装。

scroll-page.vue文件

<template>
  <scroll-view
    scroll-y="true"
    :style="{
      height: windowHeight + 'px',
      boxSizing: 'border-box',
      borderBottom: scrollPageProps.borderStyle,
      backgroundColor: scrollPageProps.backgroundColor,
    }"
    :refresherEnabled="scrollPageProps.refresherEnabled"
    :refresherTriggered="scrollPageProps.refresherTriggered"
    @refresherrefresh="$emit('refresherrefresh', $event)"
    @scrolltolower="$emit('scrolltolower', $event)"
  >
    <!-- 适配安全区域 -->
    <view class="scroll-page-content">
      <slot></slot>
    </view>
  </scroll-view>
</template>

<script setup>
  // 获取页面高度
  const { windowHeight } = uni.getSystemInfoSync()
  // 自定义组件属性,子组件
  const scrollPageProps = defineProps({
    borderStyle: {
      type: [String, Boolean],
      default: false,
    },
    refresherEnabled: {
      type: Boolean,
      default: false,
    },
    refresherTriggered: {
      type: Boolean,
      default: false,
    },
    backgroundColor: {
      type: String,
      default: '#fff',
    },
  })
  // 自定义事件
  defineEmits(['refresherrefresh', 'scrolltolower'])
</script>

<style lang="scss">
  .scroll-page-content {
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>