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

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  
  

  <hr> 疑问+bug+办理方式：

  

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

<hr>

  

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

<hr> 案例截图：

  

• 如下：
  

<hr> 附：案例代码

  

• 参考如下：
  
  1. <template>
  2.   <view>
  3.     <view class="travel-switch">
  4.       <view class="tabs-content">
  5.         <nut-row :gutter="10">
  6.           <nut-col :span="12" class="mb-3">
  7.             <!--单据类型-->
  8.             <uni-data-select v-model="queryParams.receiptCode" :localdata="changeDataOptions(DICT_TYPE.FEE_RECEIPT_CODE)" placeholder="单据类型" @change="changeTypeSelect"></uni-data-select>
  9.           </nut-col>
  10.           <nut-col :span="12" class="mb-3">
  11.             <!--单据状态-->
  12.             <uni-data-select v-model="queryParams.receiptStatus" :localdata="changeDataOptions(DICT_TYPE.FEE_RECEIPT_STATUS)" @change="changeStatusSelect" placeholder="单据状态"></uni-data-select>
  13.           </nut-col>
  14.           <nut-col :span="24" class="mb-3">
  15.             <view class="rangeSection">
  16.               <view class="start iconfont icon-calendar" @click="openCalendar()">
  17.                 {
  18.    
  19.     { queryParams?.startDate ? queryParams?.startDate : '开始日期' }}
  20.               </view>
  21.               <view class="to">至</view>
  22.               <view class="end iconfont icon-calendar" @click="openCalendar()">
  23.                 {
  24.    
  25.     { queryParams?.endDate ? queryParams?.endDate : '结束日期' }}
  26.               </view>
  27.             </view>
  28.           </nut-col>
  29.                                         <nut-col :span="12" style="text-align: center;">
  30.                                                 <nut-button block custom-color="#4869D9" shape="square" type="primary" @click="reset"
  31.                                                 >重置
  32.                                                 </nut-button>
  33.                                         </nut-col>
  34.           <nut-col :span="12" style="text-align: center;">
  35.             <nut-button block custom-color="#4869D9" shape="square" type="primary" @click="search"
  36.             >查询
  37.             </nut-button>
  38.           </nut-col>
  39.         </nut-row>
  40.         <nut-row :gutter="10">
  41.         </nut-row>
  42.       </view>
  43.     </view>
  44.   </view>
  46.   <!--列表-->
  47.   <view class="update-list">
  48.     <nut-list : :listData="dataList" @scroll="handleScrollPage" >
  49.       <template v-slot="{ item, index }">
  50.         <nut-swipe :name="index+''" :disabled="isDisable(item)" :ref="e=>handleSetInputMap(e,index)" @open=

  复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。