nut-list和nut-swipe搭配:nut-cell侧滑定义无法冒泡打开及bug(含代码、案例、截图)
Nut-UI 官方文档:
疑问+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)"