uniAPP滑轮事件之页面滑到一定距离固定某个元素在顶部,如导航栏
1. :style="isTop == 1 ? 'position:fixed;background:#FFFFFF;z-index:9;top:0' :''" //给元素添加定位样式
2. 变量istop要定义在data中,默认0
3. 页面生命周期mouted,和onLoad的同一层级
mounted() {
console.log('mounted 组件挂载完毕状态===============》');
const query = uni.createSelectorQuery().in(this);
query.select('#scrollView').boundingClientRect(data => {
console.log("得到布局位置信息" + JSON.stringify(data));
console.log("节点离页面顶部的距离为" + data.top);
this.myScroll = data.top
}).exec();
},
3.这个#scrollView,此id是你需要固定的元素最外层id,这个方法的意义是针对于不同尺寸屏幕的手机的元素距离不同
onPageScroll:function(e){
if(e.scrollTop > this.myScroll){
this.isTop = 1
}else{
this.isTop = 0
}
},
这个j监听页面滚动距离,和onload同级
4.当滚动距离超过元素距离页面顶部的距离时,就将是否定位改为true,否则就为false
分类:
uni-app
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?