小程序吸顶
wxml代码
<view class="search {{searchFixed? 'fixed':''}}" id="affix"> 便当厨房,满30减19</view>
css代码
.fixed{
width:690rpx;
position:fixed;
top:0;
left:30rpx;
z-index: 99999;
}
js代码
//页面加载前获取距离顶部高度
onLoad(){
let that = this;
//获取tab的距离顶部高度
const query = wx.createSelectorQuery();
query.select('#affix').boundingClientRect(function (res) {
console.log(res.top)
that.setData({
tabTop:res.top
})
}).exec();
},
//监控scroll
onPageScroll: function (e) {
let that = this;
//tab的吸顶效果
if (e.scrollTop > that.data.tabTop) {
if (that.data.searchFixed) {
return
} else {
that.setData({
searchFixed: true
})
}
} else {
that.setData({
searchFixed: false
})
}
},```