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>
相关推荐
瑶琴AI前端1 小时前
uniapp实现H5和微信小程序获取当前位置(腾讯地图)
微信小程序·小程序·uni-app
耶啵奶膘8 小时前
uniapp-是否删除
linux·前端·uni-app
断墨先生13 小时前
uniapp—android原生插件开发(3Android真机调试)
android·uni-app
guai_guai_guai15 小时前
uniapp
前端·javascript·vue.js·uni-app
阿伟来咯~20 小时前
一些 uniapp相关bug
uni-app·bug
瑶琴AI前端1 天前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
mosen8681 天前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
尚梦1 天前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
尚学教辅学习资料2 天前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie2342 天前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app