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

来看看运行效果:

相关推荐
小徐_233311 小时前
Wot UI 2.1.0 发布:ConfigProvider 全局配置能力升级
前端·uni-app
qq_2299331317 小时前
uniapp踩坑-组件嵌套子组件不触发onReachBottom事件
uni-app
00后程序员张17 小时前
Jenkins 自动上传 IPA 到 App Store 把发布步骤融入 CI/CD
android·ios·小程序·https·uni-app·iphone·webview
JackieDYH18 小时前
uniapp vue3 常用的生命周期和作用使用时机
javascript·vue.js·uni-app
PedroQue9919 小时前
uni-app路由管理神器:vue-router风格体验
前端·uni-app
chéng ௹20 小时前
uniapp封装火山引擎 DataRangers 埋点 SDK
uni-app·apache·火山引擎
2501_9159090621 小时前
iOS IPA文件反编译与打包操作方法详解
android·ios·小程序·https·uni-app·iphone·webview
2501_915921432 天前
uni-app 上架 iOS 的完整流程(无需依赖 Mac)
android·macos·ios·小程序·uni-app·iphone·webview
于先生吖3 天前
前后端分离二手商城开发,质检登记、回收回款整套业务源码部署教程
java·开发语言·uni-app
Geek_Vison3 天前
政务一网通APP如何引入AI能力,通过一个AI助手就能够调用所有的功能,实现对话即办事
人工智能·ai·小程序·uni-app·小程序容器