uniapp导航栏随页面滚动淡出显示隐藏效果

最新推荐文章于 2024-09-13 11:18:52 发布

ekilito

最新推荐文章于 2024-09-13 11:18:52 发布

阅读量125

点赞数 3

文章标签： uni-app

本文链接：https://blog.csdn.net/2301_76616622/article/details/141757277

版权

<template>
  <view :style="{ height: statusBarHeight }"></view>
  <view class="demo">
    <navbar title="个人中心" :autoBack="true" :safeAreaInsetTop="true" :style="{ opacity: op }"> </navbar>
    <view style="height: 150vh">213</view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onPageScroll } from "@dcloudio/uni-app";
import navbar from "@/uni_modules/uview-plus/components/u-navbar/u-navbar.vue";

const statusBarHeight = ref(0);
const navHeight = ref(0);
const op = ref(0);

onLoad(() => {
  uni.getSystemInfo({
    success: (res) => {
      // 根据设备屏幕大小设置状态栏高度
      if (res.platform === "android") {
        statusBarHeight.value = res.statusBarHeight + "rpx";
        navHeight.value = 88;
      } else if (res.platform === "ios") {
        statusBarHeight.value = res.statusBarHeight + "rpx";
        navHeight.value = 108;
      }
    },
  });
});
onPageScroll((res) => {
  let top = res.scrollTop;
  let height = navHeight.value;
  console.log(height);
  if (top <= height) {
    op.value = Math.round((top / height) * 100) / 100;
  } else {
    op.value = 1;
  }
});
</script>

<style scoped>
.demo {
  width: 100%;
  overflow: hidden;
}
</style>