小程序到固定元素后tab切换固定顶部
文章图片
文章图片
图一变为图二 第一步：首页记录滚动到的元素距离顶部的位置
uni.createSelectorQuery().selectAll('#fix').boundingClientRect(function(res){
that.position=res[0].top
that.isGetPosition=1;
}).exec();
第二步：在小程序的滚动事件添加记录是否到达位置
onPageScroll(e){
var that= this;
//直接写入onload无法获取位置信息
if(that.isGetPosition!=1){
uni.createSelectorQuery().selectAll('#fix').boundingClientRect(function(res){
console.log(res)
that.position=res[0].top
that.isGetPosition=1;
}).exec();
}
if(that.position&&e.scrollTop>=that.position){
【小程序到固定元素后tab切换固定顶部】that.fix=1;
}else if(that.position&&e.scrollTop
}
},
第三步：根据记录对需要固定头部的设置不同类名设置
:class="[fix==1 ? 'search-box-fix' : 'search-box']"
对应css设置
.search-box{padding:20upx;
display:flex;
align-items:center;
&.search-box-fix{position:fixed;
top:0;
background:#FFFFFF;
padding:20upx;
width:710upx;
z-index:999999;
}
推荐阅读
- 2018-02-06第三天|2018-02-06第三天 不能再了，反思到位就差改变
- 一个小故事，我的思考。
- 家乡的那条小河
- 第三节|第三节 快乐和幸福（12）
- 你到家了吗
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- 遇到一哭二闹三打滚的孩子，怎么办┃山伯教育
- 死结。