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

发布于:2025-05-07 ⋅ 阅读:(9) ⋅ 点赞:(0)

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

Nut-UI 官方文档:


疑问+bug+解决方式:

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

  • 博主自留地:
    项目参考: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)" 

网站公告

今日签到

点亮在社区的每一天
去签到