微信小程序 wepy中 affix 图钉 吸顶效果实现

1. 思路

实现这个效果的思路并不难，主要分为两个部分

• 动态的获取要设置图钉元素距离顶部的距离
• 监听页面滚动事件，当页面滚动的距离大于等于图钉元素距离顶部的距离时，给设置图钉的元素加上一个固定定位。

2. 动态获取距离

我们都知道，微信小程序和vue类似，一般情况下是不需要直接获取dom元素的，都是用数据控制视图。但是当前这个需求，我们需要获取到这个dom元素，并且找到他的scrollTop这样一个值，那么，经过阅读了微信小程序的文档之后，我们发现，SelectorQuery wx.createSelectorQuery()这样一个api，可以返回一个 SelectorQuery 对象实例。
示例代码：

const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
  res[0].top       // #the-id节点的上边界坐标
  res[1].scrollTop // 显示区域的竖直滚动位置
})

那么，在我们当前的这个需求中，一进入页面就要获取到我们要设置图钉的元素的scrollTop，所以，我们要在data中，先定义一个值，然后在生命周期onload中，获取这个值。

3. 根据判断的结果，动态修改类

 
    我是图钉
  

4. 完整代码

不见惹

image