小程序的吸顶效果
由于工作开发需要，页面上会有吸顶效果。在官方和社区都没有完美解决方案(提供一些思路)后，自己尝试做一些解决方案，但是效果并没有那么完美。原以为只能这样了。
但看到美团外卖的首页效果特别好，所以就重新换个思路解决了一下。感觉还可以，希望能一起讨论的。
首先页面布局都在里面，宽高都应该是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就不过多解释了。
【小程序的吸顶效果】结束。。。
推荐阅读
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量