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时刚好与背景颜色重合),从而改变颜色

来看看运行效果:

相关推荐
嘿siri1 小时前
uniapp enter回车键不触发消息发送,已解决
前端·前端框架·uni-app·vue
00后程序员张2 小时前
fastlane 结合 appuploader 命令行实现跨平台上传发布 iOS App
android·ios·小程序·https·uni-app·iphone·webview
2501_915106322 小时前
iOS 性能优化这件事,结合多工具分析运行期性能问题
android·ios·性能优化·小程序·uni-app·cocoa·iphone
嘿siri3 小时前
自定义app端、小程序端和H5等多端自定义键盘输入框,跟随系统键盘弹出和隐藏
javascript·小程序·uni-app·uniapp
游戏开发爱好者83 小时前
App Store 上架流程,结合多工具协作
android·ios·小程序·https·uni-app·iphone·webview
cesske3 小时前
如何在yii2的uniapp项目中处理提交重复问题?
uni-app·状态模式
茶憶4 小时前
UniApp 安卓端实现文件的生成,写入,获取文件大小以及压缩功能
android·javascript·vue.js·uni-app
2501_915921434 小时前
uni-app 的 iOS 打包与上架流程,多工具协作
android·ios·小程序·uni-app·cocoa·iphone·webview
iOS阿玮14 小时前
1V1 社交精准收割 3.6 亿!40 款马甲包 + 国内社交难度堪比史诗级!
uni-app·app·apple
脾气有点小暴18 小时前
uniapp开发APP 内嵌外部 HTTPS 链接的实现方案
vue.js·uni-app