uniapp 吸顶

1. 需求：

• 1. 当目标元素超出基准元素时,元素吸顶（搜索，筛选）

• 2.当页面滚动回到原来位置时，将吸顶元素的样式修改为原来的样式。

2. 思路：

• 1. 获取吸顶元素的初始高度，以及参考元素的初始高度

• 2. 获取滚动的距离，当吸顶元素到达参考元素的初始位置时，元素吸顶，滚动距离小于参考元素的初始位置时，元素恢复原始样式

3. 代码演示：

<template>
   <view>
      <!-- 页面内容 -->
      <view style="height: 1000px;">页面内容</view>

      <!-- 吸顶元素 -->
      <view :class="{'fixed': isFixed}">
        吸顶元素
      </view>
   </view>
</template>

<script>
   export default {
      data() {
         return {
           isFixed: false, // 是否固定在页面顶部
           scrollTop: 0 // 页面滚动距离
         }
      },
      onScroll(e) {
         this.scrollTop = e.detail.scrollTop;
         // if (this.scrollTop > 参考元素初始高度) {
         if (this.scrollTop > 100px) {
            this.isFixed = true;
         } else {
            this.isFixed = false;
         }
      },
    }
</script>

节点的获取（可根据项目需求进行逻辑调整）:

• uni.createSelectorQuery()=>得到seletorQuery对象实例
• selectorQuery.in(this)=>表示选择器的取值范围为当前组件内=>仍旧返回selectQuery对象
• selectorQuery.select('选择器')=>表示匹配对应选择器节点,返回一个NodesRef对象实例
• nodesRef.boundingClientRect(callback)=>添加节点的布局位置查询请求,返回NodesRef对应的selectorQuery对象
• selectorQuery.exec()=>执行所有请求