UNIAPP----导航栏滑动实现淡隐淡出效果

最新推荐文章于 2024-02-01 11:11:53 发布
最新推荐文章于 2024-02-01 11:11:53 发布
阅读量1.4k 收藏 4
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44126737/article/details/119041260
版权

再uniapp里面，仿写淘宝的详情页滑动淡隐淡出效果。

核心思想：通过onPageScroll方法拿到滑动距离，动态修改opacity属性，rgba不可用，区别见我之前博客------这里是opacity和rgba的区别。

代码完整，复制直接用，略微臃肿，因为我截取项目里面的，有一张小图片你们是加载不出来的，可以删除。

没有组件，纯css和js动态修改。不是最简单的方法，注释已打，仅供学习参考。

HTML：

<template>
	<view>
			<view class="baikuang">
				
			</view>
			<view class="head" @tap="toTop" :style="bgcolor">
				<view class="back">
					<view class="left"><image src="/static/back_green.svg" mode=""></image></view>
				</view>
				<table></table>
				<view class="title">
					<view class="" :style="color1">
						<text @click="sp" :style="fw1" >商品</text>
					</view>
					<view class="" :style="color2">
						<text @click="xq" :style="fw2">详情</text>
					</view>
					<view class="" :style="color3">
						<text @click="tj" :style="fw3">推荐</text>
					</view>
				</view>
			</view>
	
		<view class="" style="margin-top: 88rpx;">
			
			<view class="" style="width: 200rpx;height: 6vh;background-color: #55ffff;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #aaff7f;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #55ffff;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #aaff7f;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #55ffff;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #aaff7f;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #55ffff;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #aaff7f;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #55ffff;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #aaff7f;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #55ffff;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #aaff7f;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #55ffff;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #aaff7f;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #55ffff;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #aaff7f;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #55ffff;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #aaff7f;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #55ffff;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #aaff7f;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #55ffff;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #aaff7f;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #55ffff;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #aaff7f;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #55ffff;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			<view class="" style="width: 200rpx;height: 6vh;background-color: #aaff7f;">
				<text style="color: fff;">↑↑↑↑↑↑↑↑↑↑↑↑↑</text>
			</view>
			
		</view>
	</view>
</template>

JS：

<script>
export default {
	data() {
		return {
			fw1:'font-weight:400',
			fw2:'font-weight:400',
			fw3:'font-weight:400',
			color1:'color:#323232',
			color2:'color:#323232',
			color3:'color:#323232',
			bgcolor:''
			// flag: false,
		};
	},
	methods: {
		sp(){
			this.fw1="font-weight:bold"
			this.fw2="font-weight:400"
			this.fw3="font-weight:400"
			this.color1="color:#00ce88"
			this.color2="color:#323232"
			this.color3="color:#323232"
		},
		xq(){
			this.fw1="font-weight:400"
			this.fw2="font-weight:bold"
			this.fw3="font-weight:400"
			this.color1="color:#323232"
			this.color2="color:#00ce88"
			this.color3="color:#323232"
		},
		tj(){
			this.fw1="font-weight:400"
			this.fw2="font-weight:400"
			this.fw3="font-weight:bold"
			this.color1="color:#323232"
			this.color2="color:#323232"
			this.color3="color:#00ce88"
		},
		// 通过这个方法,监听滑动的距离,通过距离,动态修改透明的
		onPageScroll(e) { 
		    if (e.scrollTop >= 0 && e.scrollTop<=8) { 
		        // this.flag = true
				this.bgcolor="opacity:0"
		    } else if(e.scrollTop > 8 && e.scrollTop<=16){
		        // this.flag = false
				this.bgcolor="opacity:0.1"
		    }else if(e.scrollTop >16 && e.scrollTop<=24){
				this.bgcolor="opacity:0.2"
			}else if(e.scrollTop >24 && e.scrollTop<=32){
				this.bgcolor="opacity:0.3"
			}else if(e.scrollTop >32 && e.scrollTop<=40){
				this.bgcolor="opacity:0.4"
			}else if(e.scrollTop >40 && e.scrollTop<=48){
				this.bgcolor="opacity:0.5"
			}else if(e.scrollTop >48 && e.scrollTop<=56){
				this.bgcolor="opacity:0.6"
			}else if(e.scrollTop >56 && e.scrollTop<=64){
				this.bgcolor="opacity:0.7"
			}else if(e.scrollTop >64 && e.scrollTop<=72){
				this.bgcolor="opacity:0.8"
			}else if(e.scrollTop >72 && e.scrollTop<=80){
				this.bgcolor="opacity:0.9"
			}else if(e.scrollTop >80 ){
				this.bgcolor="opacity:1"
			}
		}
	},
	// 页面加载,默认opacity:0,意为透明不显示
	onLoad() {
		this.fw1="font-weight:bold"
		this.fw2="font-weight:400"
		this.fw3="font-weight:400"
		this.color1="color:#00ce88"
		this.color2="color:#323232"
		this.color3="color:#323232"
		this.bgcolor="opacity:0"
	}
};
</script>

CSS：

<style scoped>
	.baikuang{
	position: fixed;
	height: 88rpx;
	width: 100%;
	top: 0;
	background-color: #fff;
	}
.head {
	width: 100%;
	height: 88rpx;
	display: flex;
	justify-content: space-around;
	background-color: #fff;
	position: fixed;
	top: 88rpx;
	background-color: #fff;
}
.left {
	height: 50rpx;
	width: 48rpx;
	position: absolute;
	bottom: 20rpx;
	left: 30rpx;
}
.left image {
	height: 100%;
	width: 100%;
}
.title {
	width: 40%;
	height: 40rpx;
	font-size: 28rpx;
	font-weight: bold;
	font-family: 黑体;
	margin: 0 auto;
	color: #323232;
	display: flex;
	justify-content: space-between;
	font-family: 黑体;
	margin-top: 28rpx;
}
</style>

weixin_44126737
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp/h5多选模糊搜索下拉框（可以进行搜索匹配以及多选功能）
04-01
uniapp/h5通用模糊下拉搜索下拉多选框； 使用步骤： 1、下载资源包，并进行解压； 2、将components文件夹中的文件拷贝到自己项目的components文件夹中； 3、在业务文件夹中引用组件multipleDataPickey，使用实例如searchMultipleSelect.vue文件
uni-app小程序中做页面滚动底部或顶部加载效果
izl040905的博客
03-30 6301
在移动应用开发中，无限滚动加载是一个常见的功能，用户可以通过滑动屏幕来加载更多的内容，从而提高应用的用户体验。本文将介绍如何使用Uniapp实现无限滚动加载的功能。
uniapp实现导航栏随着滚动淡入淡出效果
qq_44540152的博客
08-05 3869
实现思路:默认导航栏其实一直存在，只需初始时把导航栏透明度设为0，随着滚动，改变透明度即可 onPageScroll(res) { //获取距离顶部距离 const scrollTop = res.scrollTop; if (scrollTop >= 0) { // 导航条颜色透明渐变 if (scrollTop <= 20) { this.opacityNum = 0 } else if (20 < scrollTop && scrollTop
uniapp自定义导航栏背景色淡入淡出效果
最新发布
qq_45797421的博客
02-01 232
/ 页面滚动//定义一个最大值(根据页面情况滚动的情况,别页面滚动的最大距离不到200,你定义一个200,那肯定是效果不好的)// 这是 _this.bgc是我自己定义的变量,到时候切换成你得变量// 然后把这个变量写到你自定义导航栏那里${// 页面滚动 onPageScroll(e => {
uniapp 电商小程序 置顶特效/分享特效/红包特效 简单实现效果
yehaocheng520的博客
07-30 2476
uniapp 电商小程序 首页特效展示效果 首页特效视频 电商小程序首页动效 回到顶部（置顶）特效 分享特效 红包特效 回到顶部特效 要求：页面一开始是隐藏置顶按钮，页面上拉加载，如果滚动距离超过一屏幕的高度时，显示置顶按钮。 知识点： 获取手机屏幕高度 监听手机滚动的距离 获取手机屏幕高度 uniapp getSystemInfo方法使用文档： getSystemInfo uni.getSystemInfo({ success: res => { this.phoneHeig
uniapp滑动渐变导航栏实现思路
lzd2516944229的博客
03-31 1349
/需要在mounted生命周期后使用// .nav-bar是自定义导航栏的类名 #formCard是页面第一个元素的id//获取元素到页面顶部的距离//获取自定义导航栏高度//然后获取元素到导航栏的距离}.exec()//记得调用exec() 负责不执行},//监听页面滑动事件和生命周期函数同级//计算最后取两位小数//避免数字太大 给重新赋值 这一步忽略也没问题255:color1:alpha//最后使用模板字符串拼接好赋值给元素style就好了。
uniapp实现顶部导航栏背景图片渐隐渐现效果
铁锤妹妹的博客
11-14 6947
由于项目需要一个功能，顶部距离小于50rpx时，导航栏透明显示；当滚动页面时，导航栏不再透明显示。 实现思路： 如果滑动位置距离顶部<=50的话，隐藏导航栏； 50 < 距离顶部距离 <= 200, 透明度依次增加，直到opacity = 1 大于200的话，直接设置透明度opacity = 1 具体代码 案例中用到了uview这个ui框架的u-navbar组件，具体可去官网查看这个组件的可配置API <template> <view class="zeroPur
uniapp实现页面滚动显示隐藏自定义导航栏
weixin_45441173的博客
12-08 6430
滚动显示自定义导航栏
uniapp组件学习
qq_43391694的博客
02-28 1037
https://uniapp.dcloud.io/component/ 视图容器 <view> 基本属性——主要用于指示按钮效果，经常用到的有hover-class="自定义css样式"，点击之后则可将view渲染为自定义样式放开之后再自动复原。 属性名 类型 默认值 说明 hover-class String none 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 hover-stop-propag
uni-app实现滑动切换效果
weixin_59702843的博客
06-18 7694
uni-app框架了解实现一个滚动切换tab效果，这个很常见的一个效果，最后封装成一个组件，便于之后使用，写这个须要引入uni官方提供的uni.css样式，用到了写好的样式，就不须要本身写了css
jquery-sliding-menu左右滑动导航插件
06-05
jquery-sliding-menu左右滑动导航插件
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
10-16
主要介绍了uni-app自定义导航栏按钮|uniapp仿微信顶部导航条,需要的朋友可以参考下
swift-iOS自定义导航栏-导航栏联动
08-15
现在大多数的APP都有导航栏联动效果，即滑动返回的时候导航栏也跟着一起返回，比如：网易新闻，网易云音乐，腾讯视频等等，于是通过查找一些资料及其他库的做法，自己也写了一个框架，可以让每一个控制器都拥有自己...
WordPress主题Green-Park-2导航栏修改技巧
09-29
今天，我们来解决WordPress主题无法自定义添加导航的这个问题。
Node.js-一行代码实现android底部导航栏
08-12
主要功能点 构建者模式链式设置导航栏条目 自定义导航栏的字体大小图片大小 支持纯文字类型 支持底部按钮点击事件 代码简洁不到300行，只有一个类 直接拿来用
uni-app滑动菜单效果.既可以点击也可以滑动切换tab
肖肖肖丽珠的博客
01-12 4377
<template> <view class="homepage"> <!-- 顶部导航栏 --> <view class="horizonal-tab"> <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab" :scroll-left="scrollleft"&...
UNIAPP----滑动距离改变导航栏淡隐淡出
weixin_44126737的博客
08-04 1102
核心思想： onPageScroll(e) 通过这个方法,监听滑动的距离,通过距离,动态修改透明的 如果滑动的距离，e.scrollTop在哪个距离区间，就去修改view的bgcolor的透明度， 如果想要知道opacity和rgba的区别，去这里我的文章了解一下。 onPageScroll(e) { if (e.scrollTop >= 0 && e.scrollTop <= 8) { this.bgcolor = 'opacity:0'; } els.
uniapp自定义导航渐显渐隐效果实现
weixin_45488891的博客
01-10 3748
uniapp自定义导航渐显渐隐效果实现
uniapp小程序让页面滚动到底部_uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果...
weixin_39918043的博客
12-24 796
前言实现思路：通过小程序API中的触摸事件，配合CSS来实现元素的显示和隐藏。ps(也想过另一种通过监听页面滚动的方式来实现，不过效果一定很差0.0)一、需要用到的事件touchmove、touchend二、话不多说上代码1.看需求，如果是整个屏幕滑动后元素发生变化，最好放在最外面的view代码如下：我是要发生变化的元素JS代码如下：data() {return {specClass: 'hide...
uniapp scroll-view 导航栏
07-28
在代码中，使用了scroll-view组件来实现横向滚动的导航栏，通过设置scroll-x="true"来实现横向滚动效果。在scroll-view组件内部，使用了v-for指令来循环生成多个导航栏选项，每个选项都是一个view组件，并且根据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值