<template>
<div>
<div style="height:40px;position:fixed;top:0;left:0;right:0" :style={
background: `rgba(207, 143, 113, ${navBarOpacity})`,
}></div>
<div style="height:99999px"></div>
</div>
</template>
<script lang="ts" setup>
// import { useNavbarOpacity } from '@/utils/hooks/usePageScroll'
import { computed, ref } from '@vue/composition-api'
import { onPageScroll } from '@dcloudio/uni-app'
export function usePageScroll() {
const top = ref(0)
onPageScroll(e => {
top.value = e.scrollTop
})
return top
}
const navigationBarHeight = uni.getSystemInfoSync().statusBarHeight || 44
export function useNavbarOpacity(navHeight = navigationBarHeight) {
const scrollTop = usePageScroll()
return computed(() => Math.min(navHeight, scrollTop.value) / navHeight)
}
const navBarOpacity = useNavbarOpacity()
</script>
ArmLiang
- 发布：2025-11-03 15:21
- 更新：2025-11-04 19:00
- 阅读：44
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10 19044.2251
HBuilderX类型： 正式
HBuilderX版本号： 4.55
手机系统： Android
手机系统版本号： Android 14
手机厂商： vivo
手机机型： iqoo neo 9
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
在h5环境滚动页面，观察顶部导航栏随着滚动出现透明度效果
在app环境滚动页面看顶部导航栏背景颜色
在h5环境滚动页面，观察顶部导航栏随着滚动出现透明度效果
在app环境滚动页面看顶部导航栏背景颜色
预期结果：
h5和app滚动时候，顶部的导航栏透明度效果一致，越往下滚动顶部导航栏透明度越低
h5和app滚动时候，顶部的导航栏透明度效果一致，越往下滚动顶部导航栏透明度越低
实际结果：
app滚动导航栏无透明度效果，h5有效果
app滚动导航栏无透明度效果，h5有效果
bug描述：
app里面使用@vue/composition-api 里面的computed计算属性，计算属性没有任何效果
安装官网配置的vue2.6+ts+composition-api项目
2 个回复
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
uniapp vue2 项目不支持 setup 语法，直接安装和引用相关插件不保证完全可用。建议升级 vue3 使用完整 setup 特性。
DCloud_UNI_LXH
用 watch 实现吧