uni-app uni-swipe-action list组件中超出一屏的item能滑动出来但失去滑动效果且滑出后不能隐藏

开发环境	版本号	项目创建方式
Mac	12.5	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：3.98

手机系统：Android

手机系统版本号：Android 12

手机厂商：小米

手机机型：红米k40

页面类型：nvue

vue版本：vue2

打包方式：云端

操作步骤：

nvue uni-swipe-action包裹 list组件超出屏幕的cell能滑动出来但是失去滑动效果并且滑不回去

预期结果：

nvue uni-swipe-action包裹 list组件超出屏幕的cell能滑动出来并且有滑动效果且能滑动回去

实际结果：

nvue uni-swipe-action包裹 list组件超出屏幕的cell能滑动出来但是失去滑动效果并且滑不回去

bug描述：

<uni-swipe-action>
    <list class="message-list" scrollable show-scrollbar="false" :bounce="false"
        :style="{height: windowHeight - statusBarHeight - topHeight + 'px'}">
        <cell v-for="(item,index) in sessionList1" :key="item.id">
            <uni-swipe-action-item :threshold="0" :right-options="options" @click="onClick($event,item)">
                <MessageListItem :item="item" />
            </uni-swipe-action-item>
        </cell>
    </list>
</uni-swipe-action>

eggper 1楼•6 天前

求助！！～

wuwangju 2楼•6 天前

解决了吗？

songsunli 3楼•6 天前

目前不建议这么使用， uni-swipe-action 和 uni-swipe-action-item 最好临近使用，你这个用法，大概率是因为层级问题，导致父子组件失去了联系，所以导致联动效果失去了作用。

vueper 4楼•6 天前作者

如果要用nvue的list。建议怎么用比较好

ionicwang 5楼•6 天前

我试过直接把uni-swipe-action里面的组件直接改成list。但是有点影响

htzhanglong 6楼•6 天前

在使用 uni-app 的 uni-swipe-action 组件时，如果列表项（item）超出一屏，可能会出现滑动失效或滑动后无法隐藏的问题。这通常是由于 uni-swipe-action 的滑动机制与列表滚动之间的冲突导致的。以下是一些可能的解决方案：

1. 使用 `scroll-view` 包裹 `uni-swipe-action`

将 uni-swipe-action 组件放在 scroll-view 中，这样可以确保列表项的滑动和滚动不会冲突。

<scroll-view scroll-y="true" style="height: 100vh;">
  <uni-swipe-action>
    <uni-swipe-action-item v-for="(item, index) in list" :key="index">
      <!-- 列表项内容 -->
    </uni-swipe-action-item>
  </uni-swipe-action>
</scroll-view>

2. 手动控制滑动状态

通过手动控制 uni-swipe-action 的滑动状态，可以在列表滚动时关闭已滑出的项。

<template>
  <scroll-view scroll-y="true" style="height: 100vh;" @scroll="handleScroll">
    <uni-swipe-action>
      <uni-swipe-action-item 
        v-for="(item, index) in list" 
        :key="index" 
        :ref="'swipeItem' + index"
        @change="handleSwipeChange(index)"
      >
        <!-- 列表项内容 -->
      </uni-swipe-action-item>
    </uni-swipe-action>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      list: [], // 你的列表数据
      activeIndex: null // 当前滑出的项索引
    };
  },
  methods: {
    handleScroll() {
      if (this.activeIndex !== null) {
        this.$refs['swipeItem' + this.activeIndex][0].close();
        this.activeIndex = null;
      }
    },
    handleSwipeChange(index) {
      this.activeIndex = index;
    }
  }
};
</script>

3. 使用 `touchmove` 事件

通过监听 touchmove 事件，在用户开始滚动时关闭已滑出的项。

<template>
  <scroll-view scroll-y="true" style="height: 100vh;" @touchmove="handleTouchMove">
    <uni-swipe-action>
      <uni-swipe-action-item 
        v-for="(item, index) in list" 
        :key="index" 
        :ref="'swipeItem' + index"
        @change="handleSwipeChange(index)"
      >
        <!-- 列表项内容 -->
      </uni-swipe-action-item>
    </uni-swipe-action>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      list: [], // 你的列表数据
      activeIndex: null // 当前滑出的项索引
    };
  },
  methods: {
    handleTouchMove() {
      if (this.activeIndex !== null) {
        this.$refs['swipeItem' + this.activeIndex][0].close();
        this.activeIndex = null;
      }
    },
    handleSwipeChange(index) {
      this.activeIndex = index;
    }
  }
};
</script>

4. 使用 `uni-swipe-action` 的 `autoClose` 属性

uni-swipe-action 组件提供了一个 autoClose 属性，可以在其他项滑动时自动关闭当前滑出的项。

<uni-swipe-action :autoClose="true">
  <uni-swipe-action-item v-for="(item, index) in list" :key="index">
    <!-- 列表项内容 -->
  </uni-swipe-action-item>
</uni-swipe-action>