- 发布：2024-12-18 11:23
- 更新：2024-12-18 11:23
- 阅读：76
产品分类： uni小程序SDK
手机系统： 全部
手机厂商： 华为
页面类型： vue
SDK版本号： 2.3.16
测试过的手机：
示例代码：
<view
id="driving3"
class="cu-form-group"
>
<view class="title">
<text class="text-red">*</text>
行驶证车辆类型
</view>
<view
class="text-gray text-right"
style="padding-right: 20rpx"
>
{{ ocrData.drivingVehicleType }}
</view>
<view style="" class="auth-arrow-box" v-else>
<picker
mode="multiSelector"
style="padding-right: 10rpx"
@change="MultiChange"
:value="multiIndex"
:range="multiArray"
>
<view class="picker">
{{ ocrData.drivingVehicleType || '请选择' }}
</view>
</picker>
<text class="lg cuIcon-right"></text>
</view>
</view>
<view
class="cu-form-group"
>
<view class="title">
<text class="text-red">*</text>
行驶证有效期
</view>
<view class="auth-arrow-box">
<view style="padding-right: 0; height: 60rpx; line-height: 60rpx">
<view style="position: relative">
<BiaofunDatetimePicker
placeholder="请选择"
fields="month"
:default-value="
ocrData.drivingLicenseExpired ||
ocrData.drivingLicenseValidDate
"
:start="startMonth"
:end="endMonth"
@change="(e) => DateChange(e, 'drivingLicenseValidDate')"
></BiaofunDatetimePicker>
</view>
</view>
<text class="lg cuIcon-right"></text>
</view>
</view>
// BiaofunDatetimePicker 封装
<picker mode="multiSelector" :range="range" range-key="text" @change="change" @columnchange="columnchange" :value="value" :disabled="disabled">
<view class="content" :class="{ placeholder: !dateStr }" @click="warning">
<text>{{ dateStr ? dateStr : placeholder }}</text>
</view>
</picker>
<view
id="driving3"
class="cu-form-group"
>
<view class="title">
<text class="text-red">*</text>
行驶证车辆类型
</view>
<view
class="text-gray text-right"
style="padding-right: 20rpx"
>
{{ ocrData.drivingVehicleType }}
</view>
<view style="" class="auth-arrow-box" v-else>
<picker
mode="multiSelector"
style="padding-right: 10rpx"
@change="MultiChange"
:value="multiIndex"
:range="multiArray"
>
<view class="picker">
{{ ocrData.drivingVehicleType || '请选择' }}
</view>
</picker>
<text class="lg cuIcon-right"></text>
</view>
</view>
<view
class="cu-form-group"
>
<view class="title">
<text class="text-red">*</text>
行驶证有效期
</view>
<view class="auth-arrow-box">
<view style="padding-right: 0; height: 60rpx; line-height: 60rpx">
<view style="position: relative">
<BiaofunDatetimePicker
placeholder="请选择"
fields="month"
:default-value="
ocrData.drivingLicenseExpired ||
ocrData.drivingLicenseValidDate
"
:start="startMonth"
:end="endMonth"
@change="(e) => DateChange(e, 'drivingLicenseValidDate')"
></BiaofunDatetimePicker>
</view>
</view>
<text class="lg cuIcon-right"></text>
</view>
</view>// BiaofunDatetimePicker 封装
<picker mode="multiSelector" :range="range" range-key="text" @change="change" @columnchange="columnchange" :value="value" :disabled="disabled">
<view class="content" :class="{ placeholder: !dateStr }" @click="warning">
<text>{{ dateStr ? dateStr : placeholder }}</text>
</view>
</picker>操作步骤：
页面内写多个 多列picker， 第一个picker的range数据直接写死。 后面picker的range数据使用耗时时间加载数据
页面内写多个 多列picker， 第一个picker的range数据直接写死。 后面picker的range数据使用耗时时间加载数据
预期结果：
能正常展示多列picker
能正常展示多列picker
实际结果：
页面内存在多个多列picker，
1、数据展示异常
2、滑动第一列之后，第二列数据没了
页面内存在多个多列picker，
1、数据展示异常
2、滑动第一列之后，第二列数据没了
bug描述：
harmonyOS NEXT， 使用4.36版本的开发工具，SDK版本"@dcloudio/uni-app-runtime": "^2.3.16"
页面内存在多个多列的picker， mode="multiSelector", 多个picker的数据混在一块了， 而且数据不联动。 滑动第一列后，后面的列就没有数据了。
还一个问题， 如果数据量大，加载比较慢的话， range数据还没加载完成， 但是鸿蒙那边的picker已经创建完成了，就会导致鸿蒙picker的range是空数组，导致闪退。
