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

来看看运行效果:

相关推荐
xiaopang17 小时前
一次小程序 Canvas 海报真机调试复盘:从空白导出到 iOS 保存失败
uni-app
MrFlySand_飞沙21 小时前
uniapp开发微信小程序实现接入企业微信客服
微信小程序·小程序·uni-app·企业微信
PedroQue992 天前
Vue Router 4.x风格导航守卫全面升级
前端·uni-app
Haibakeji2 天前
APP小程序定制开发项目频繁延期?前期规避方法与落地避坑指南
小程序·uni-app·软件需求
anyup2 天前
迁移uni-app x,我是如何让 AI 把我一步步搞崩溃的...
前端·uni-app·trae
2501_916007472 天前
申请 iOS 推送证书并配置 APNs 群发推送教程
android·ios·小程序·https·uni-app·iphone·webview
博客zhu虎康2 天前
uni-app云打包显示编译成功,但是一直没有进入打包队列,后面也一直没反应
uni-app
JavaDog程序狗3 天前
【指南】uni-app微信小程序多环境CI-CD完全指南
ci/cd·uni-app·jenkins
PedroQue993 天前
uni-router v2.1.0 升级:导航守卫全面支持返回值模式
前端·uni-app
2501_915909064 天前
iOS test 测试怎么做?功能、性能、兼容、稳定与安全五类测试指南
android·ios·小程序·https·uni-app·iphone·webview