uniapp监听滚动实现顶部透明度变化

 效果如图：

实现思路：

1、使用onPageScroll监听页面滚动，改变导航条的透明度；

2、关于顶部图片的高度：

如果是小程序：使用getMenuButtonBoundingClientRect获取胶囊顶部距离和胶囊高度；

如果是H5：给个自定义高度就行；

3、透明度opacity的计算公式：1 - (this.imgHeight - e.scrollTop) / this.imgHeight；

4、相关组件绑定行内样式，完活！

完整代码：

<template><view class=""><!-- 顶部导航 --><fa-navbar :title="vuex_table_title || '宝乐名车服务'" ref="navbar":style="[{opacity:opacity},{position:'fixed'},{'zIndex':'999'}]"></fa-navbar><!-- 顶部图片 --><view class="head_img" :style="[{overflow: 'hidden'},{height:imgHeight+'px'}]"><img :style="{width: '100%'}"src="https://sa.ffep.online:20093/uploads/20240907/590a5bb30e86dbbbe6a9172a41ba157a.png" alt="" /></view><!-- 搜索 --><view class="u-p-20 u-bg-white u-flex u-col-center" v-if="is_show"><view class="u-flex-1"><fa-search :mode="2"></fa-search></view><view class="u-p-l-15 u-p-r-5 u-flex u-col-center" v-if="is_order"><fa-orderby-select :filterList="filterList" :orderList="orderList" :multiple="true"@change="goOrderBy"></fa-orderby-select></view></view><!-- 分类 --><view class="u-border-top" v-if="isTab"><u-tabs :list="tabList" :active-color="theme.bgColor" :bar-width="tabwidth" name="title" :is-scroll="true":current="current" @change="change"></u-tabs></view><!-- 轮播图 --><view class="" v-if="is_show"><u-swiper :title="true" border-radius="0" height="320" :list="bannerList" @click="openPage"></u-swiper></view><!-- 列表 --><fa-article-item :archives-list="archivesList"></fa-article-item><!-- 为空 --><view class="u-m-t-60 u-p-t-60" v-if="is_empty"><u-empty text="暂无内容展示" mode="list"></u-empty></view><!-- 加载更多 --><view class="u-p-30" v-if="archivesList.length"><u-loadmore bg-color="#f4f6f8" :status="status" /></view><!-- 回到顶部 --><u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }":custom-style="{ backgroundColor: lightColor }"></u-back-top><!-- 底部导航 --><fa-tabbar></fa-tabbar></view>
</template><script>import {archives} from '@/common/fa.mixin.js';export default {mixins: [archives],computed: {bannerList() {return this.vuex_config.bannerList || [];}},watch: {},onPageScroll(e) {let calc = 1 - (this.imgHeight - e.scrollTop) / this.imgHeight;this.opacity = calc},data() {return {imgHeight: 0,opacity: 0};},onLoad(e) {// #ifdef MP-WEIXIN || APP-PLUS// 获取状态栏和胶囊位置const {top,height} = uni.getMenuButtonBoundingClientRect()this.imgHeight = (top + height+10)*1.5;// #endif// #ifdef H5this.imgHeight = 100;// #endiflet query = e;if (JSON.stringify(query) == '{}') {query = e;}if (query && JSON.stringify(query) != '{}') {this.params = query;} else {this.params = {channel: -1,model: -1}}this.getCategory();this.getArchives();},methods: {},};
</script><style lang="scss">.head_img {// position: fixed;top: 0;left: 0;width: 100%;transition: opacity 0.2s ease;/* 平滑过渡 */}page {background-color: #f4f6f8;}
</style>