由于工作开发需要,页面上会有吸顶效果。在官方和社区都没有完美解决方案(提供一些思路)后,自己尝试做一些解决方案,但是效果并没有那么完美。原以为只能这样了。
但看到美团外卖的首页效果特别好,所以就重新换个思路解决了一下。感觉还可以,希望能一起讨论的。
首先页面布局都在<scroll-view></scroll-view>里面,宽高都应该是100%,具体看你自己的原型稿。
接下来就是放置需要吸顶效果的元素。
在onLoad()里面获取该元素的top
var query = wx.createSelectorQuery()//创建节点查询器 query
//这段代码的意思是选择Id= the - id的节点,获取节点位置信息的查询请求
query.select('#home-tab-list').boundingClientRect()
query.exec(function (res) {
that.setData({
homeTop: res[0].top
})
});
ps:在onShow里面监听该元素的top值,在第一次和后面进入时数值不一致。希望有人解惑一下。
最后就是bindscroll的监听事件:
homeScroll: function(event) {
let that = page;
// 注意吸顶元素上面是否有固定位置的元素
if(event.detail.scrollTop > that.data.homeTop){
that.setData({
isFixed: true
});
}else{
that.setData({
isFixed: false
});
}
}
wxml及wxss就不过多解释了。
结束。。。