小程序到固定元素后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){

that.fix=1;

}else if(that.position&&e.scrollTop<that.position){

that.fix=0;

}

},


第三步:根据记录对需要固定头部的设置不同类名设置

: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;}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容