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 H5
this.imgHeight = 100;
// #endif

let 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>

原文地址：https://blog.csdn.net/hj1043/article/details/142484337

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！