在uni-app中实现下拉刷新功能，同时避免二楼现象（即用户下拉时页面内容跳动或重叠），可以利用uni-app提供的onPullDownRefresh事件和scroll-view组件。下面是一个简化的代码示例，展示了如何实现这一功能。

1. 修改pages.json配置

首先，确保在pages.json中配置了允许页面下拉刷新：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "enablePullDownRefresh": true
      }
    }
  ]
}

2. 页面代码实现

在页面的.vue文件中，实现下拉刷新逻辑：

<template>
  <view class="container">
    <scroll-view scroll-y="true" :scroll-top="scrollTop">
      <view v-for="(item, index) in list" :key="index" class="item">
        {{ item }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [], // 数据列表
      scrollTop: 0, // 滚动位置
      refreshing: false // 刷新状态
    };
  },
  onLoad() {
    this.fetchData(); // 初始化数据
  },
  methods: {
    // 下拉刷新事件
    onPullDownRefresh() {
      if (this.refreshing) return;
      this.refreshing = true;
      setTimeout(() => {
        this.list = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`); // 模拟刷新数据
        this.refreshing = false;
        uni.stopPullDownRefresh(); // 结束刷新
      }, 2000);
    },
    fetchData() {
      this.list = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`); // 初始化数据
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop; // 记录滚动位置
  }
};
</script>

<style>
.container {
  height: 100vh;
}
.item {
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
</style>

3. 说明

• enablePullDownRefresh：在pages.json中配置允许页面下拉刷新。
• onPullDownRefresh：监听下拉刷新事件，在事件处理函数中更新数据并调用uni.stopPullDownRefresh()结束刷新状态。
• scroll-view组件：使用scroll-view组件包裹内容，并绑定scroll-top属性记录滚动位置，避免二楼现象。
• scrollTop数据：在onPageScroll事件中更新滚动位置，确保页面内容在刷新时不会跳动。

通过上述代码，可以在uni-app中实现下拉刷新功能，同时有效避免二楼现象。