本文实例为大家分享了微信小程序实现吸顶特效的具体代码,供大家参考,具体内容如下
首先上原始的图
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.5
console.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:''})
}
},
关于SelectorQuery wx.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.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html
最后实现的效果: