本文实例为大家分享了微信小程序实现吸顶特效的具体代码，供大家参考，具体内容如下
首先上原始的图
wxml:
<view class="tab1 {{oneFixed}}" id="tab"><!-- tabBar --><import src="/pages/templates/common/nav/cuNav" /><template is="cuNav" data="{{TabCur:tabCurrent,stateTabs,tabSelect:'tabSelect'}}" /></view>
wxss:
.Fixed{position:fixed;top:0;z-index:2;}
js:
data:{oneFixed:"",tabTop:"0",},onShow(options) { const query=wx.createSelectorQuery();query.select('#tab').boundingClientRect(function(res){_that.data.tabTop=res.top//136.5console.log(res.top,'res.top')}).exec();},onPageScroll:function(event){console.log(event.scrollTop > this.data.tabTop)if(event.scrollTop>this.data.tabTop){this.setData({oneFixed:"Fixed"})}else{this.setData({oneFixed:''})}},
关于SelectorQuerywx.createSelectorQuery()
小程序官方文档是这样解释的:
返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用this.createSelectorQuery()来代替。
示例代码
const query = wx.createSelectorQuery()query.select('#the-id').boundingClientRect()query.selectViewport().scrollOffset()query.exec(function(res){res[0].top // #the-id节点的上边界坐标res[1].scrollTop // 显示区域的竖直滚动位置})
网址:https://developers./miniprogram/dev/api/wxml/wx.createSelectorQuery.html
最后实现的效果:
如果觉得《小程序实现吸顶效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
