uni-app nvue list 组件中使用uni-transition滚动页面会被回收无法显示

在 uni-app 的 nvue 页面中，使用 uni-transition 组件时，如果页面滚动导致组件被回收，可能是因为 nvue 的渲染机制与 vue 页面不同。nvue 是基于原生渲染的，为了提高性能，系统会对不可见的组件进行回收。

要解决这个问题，可以尝试以下几种方法：

1. 使用 recycle-list 组件

recycle-list 是 nvue 中专门用于处理长列表的组件，它可以有效地管理列表项的渲染和回收。你可以将 uni-transition 组件放在 recycle-list 的列表项中，这样可以避免组件被回收。

<recycle-list :list="dataList" :template="template">
  <template v-slot:default="{ item }">
    <uni-transition :show="item.show">
      <view>{{ item.text }}</view>
    </uni-transition>
  </template>
</recycle-list>

2. 使用 keep-alive 组件

keep-alive 是 vue 中的一个内置组件，它可以缓存组件的状态，避免组件被销毁。虽然 nvue 不完全支持 vue 的所有特性，但你可以尝试在 nvue 中使用 keep-alive 来缓存 uni-transition 组件。

<keep-alive>
  <uni-transition :show="show">
    <view>Content</view>
  </uni-transition>
</keep-alive>

3. 手动控制组件的显示和隐藏

如果上述方法不适用，你可以手动控制 uni-transition 组件的显示和隐藏。在页面滚动时，动态设置 uni-transition 的 show 属性，确保组件在需要时显示，在不需要时隐藏。

<uni-transition :show="isVisible">
  <view>Content</view>
</uni-transition>

export default {
  data() {
    return {
      isVisible: false
    };
  },
  methods: {
    onScroll(e) {
      // 根据滚动位置动态设置 isVisible
      this.isVisible = e.detail.scrollTop > 100;
    }
  }
};

4. 使用 scroll-view 组件

如果页面内容较少，可以考虑使用 scroll-view 组件来代替页面的滚动。scroll-view 是一个可滚动的容器，它可以避免页面滚动时组件被回收。

<scroll-view scroll-y [@scroll](/user/scroll)="onScroll">
  <uni-transition :show="isVisible">
    <view>Content</view>
  </uni-transition>
</scroll-view>