nut-list和nut-swipe搭配：nut-cell侧滑定义无法冒泡打开及bug（含代码、案例、截图）

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/140694353

nut-list和nut-swipe搭配：nut-cell侧滑定义无法冒泡打开及bug（含代码、案例、截图）

Nut-UI 官方文档：

swipe侧滑手势：
https://nutui.jd.com/h5/vue/4x/#/zh-CN/component/swipe

list 虚拟列表：
https://nutui.jd.com/h5/vue/4x/#/zh-CN/component/list

疑问+bug+解决方式：

打开屏幕指定为的某一条数据的侧滑效果之后再操作列表滚动后，屏幕固定位置的数据侧滑被固定打开的bug；
无法单一冒泡实现始终打开一个侧滑的效果（本案例为了不出现bug，直接在页面滚动的时候自动关闭所有侧滑展开的数据，即关闭所有侧滑）；
其他问题待研究，暂不赘述。

博主自留地：
项目参考：yecai-移动端》更多单据

案例截图：

如下：

在这里插入图片描述

附：案例代码

参考如下：

<template>
  <view>
    <view class="travel-switch">
      <view class="tabs-content">
        <nut-row :gutter="10">
          <nut-col :span="12" class="mb-3">
            <!--单据类型-->
            <uni-data-select v-model="queryParams.receiptCode" :localdata="changeDataOptions(DICT_TYPE.FEE_RECEIPT_CODE)" placeholder="单据类型" @change="changeTypeSelect"></uni-data-select>
          </nut-col>
          <nut-col :span="12" class="mb-3">
            <!--单据状态-->
            <uni-data-select v-model="queryParams.receiptStatus" :localdata="changeDataOptions(DICT_TYPE.FEE_RECEIPT_STATUS)" @change="changeStatusSelect" placeholder="单据状态"></uni-data-select>
          </nut-col>
          <nut-col :span="24" class="mb-3">
            <view class="rangeSection">
              <view class="start iconfont icon-calendar" @click="openCalendar()">
                {
    { queryParams?.startDate ? queryParams?.startDate : '开始日期' }}
              </view>
              <view class="to">至</view>
              <view class="end iconfont icon-calendar" @click="openCalendar()">
                {
    { queryParams?.endDate ? queryParams?.endDate : '结束日期' }}
              </view>
            </view>
          </nut-col>
					<nut-col :span="12" style="text-align: center;">
						<nut-button block custom-color="#4869D9" shape="square" type="primary" @click="reset"
						>重置
						</nut-button>
					</nut-col>
          <nut-col :span="12" style="text-align: center;">
            <nut-button block custom-color="#4869D9" shape="square" type="primary" @click="search"
            >查询
            </nut-button>
          </nut-col>
        </nut-row>
        <nut-row :gutter="10">
        </nut-row>
      </view>
    </view>
  </view>

  <!--列表-->
  <view class="update-list">
    <nut-list :height="126" :listData="dataList" @scroll="handleScrollPage" >
      <template v-slot="{ item, index }">
        <nut-swipe :name="index+''" :disabled="isDisable(item)"