uniapp 吸顶

小新的飞天大象

已于 2023-11-20 13:17:02 修改

阅读量754

点赞数

CC 4.0 BY-SA版权

文章标签： uni-app

于 2023-11-20 13:12:50 首次发布

本文链接：https://blog.csdn.net/weixin_59727199/article/details/134505153

本文介绍了如何在Vue应用中实现元素在页面滚动时自动吸顶并根据滚动位置调整样式。通过监听滚动事件，判断元素位置并与参考元素高度对比来控制吸顶状态。使用uni.createSelectorQuery进行节点获取和布局查询。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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()=>执行所有请求