uniapp:如何将返回标根据下滑的距离而改变颜色

在项目过程中我们会遇到这种情况:

返回标和背景颜色重合导致无法看见的情况,这里有一个简单的方法可以实现

监听页面向下滑动的api:

javascript 复制代码
 onPageScroll : function(e) { //nvue暂不支持滚动监听,可用bindingx代替
		 console.log("滚动距离为:" + e.scrollTop);
	   },

​

​

这个api会实时监听你鼠标向下滚动的距离,直接写在vue2:methods中即可。vue3直接写在setup函数中就可以了如图所示:

步骤

1、先在data中定义数据taranY

2、在方法onPageScroll获取监控的距离

3、在html中通过三目运算符,通过判断taranY的值是大于40(因为下滑距离大于40时刚好与背景颜色重合),从而改变颜色

来看看运行效果:

相关推荐
2501_9160074710 小时前
苹果手机iOS应用管理全指南与隐藏功能详解
android·ios·智能手机·小程序·uni-app·iphone·webview
2501_9151063213 小时前
全面理解 iOS 帧率,构建从渲染到系统行为的多工具协同流畅度分析体系
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088915 小时前
iOS 能耗检测的工程化方法,构建多工具协同的电量分析与性能能效体系
android·ios·小程序·https·uni-app·iphone·webview
济南壹软网络科技有限公司15 小时前
综合社交服务平台的技术架构与实践:构建高可用、多端覆盖的互动生态
uni-app·php·开源源码·陪玩陪聊h5
2501_9159214316 小时前
重新理解 iOS 的 Bundle Id 从创建、管理到协作的工程策略
android·ios·小程序·https·uni-app·iphone·webview
2501_9151063216 小时前
当 altool 退出历史舞台,iOS 上传链路的演变与替代方案的工程实践
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张16 小时前
Transporter 的局限与替代路径,iOS 上传流程在多平台团队中的演进
android·ios·小程序·https·uni-app·iphone·webview
lwprain16 小时前
uniapp使用uniview-plus性能问题处理
uni-app
00后程序员张16 小时前
Python 抓包工具全面解析,从网络监听、协议解析到底层数据流捕获的多层调试方案
开发语言·网络·python·ios·小程序·uni-app·iphone
AH_HH18 小时前
UniApp H5 代理失效的终极替代方案
uni-app