2020年4月21日

微信小程序切图—实现吸顶的效果


需求:当用户进行页面的滚动操作,大于一定高度的时候实现吸顶

1.页面初始时获取需要吸顶的元素距离顶部的高度
onload()或onshow()中均可以实现

let me = this;
//获取tab的距离顶部高度
const query = wx.createSelectorQuery();
query.select(‘#tab’).boundingClientRect(function (res) {
// console.log(res.top)
me.data.tabTop = res.top
}).exec();

2.监听用户滚动行为

onPageScroll:function(e){
let me = this;
//tab的吸顶效果
console.log(e.scrollTop > me.data.tabTop)
if(e.scrollTop>me.data.tabTop){
if(me.data.tabFix){
return
}else{
me.setData({
tabFix:’Fixed’
})
}
}else{
me.setData({
tabFix:”
})
}
},

3.wxss样式

.Fixed{
position: fixed;
top: 0;
margin-top: 0;
z-index: 99999;
}

4.页面布局

<scroll-view scroll-x=”true” class=”tab {{tabFix}}” id=”tab” scroll-into-view=”{{intoView}}”>
</scroll-view>

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732