uni-app harmonyOS NEXT 页面内多个picker组件multiSelector数据混乱

uni-app harmonyOS NEXT 页面内多个picker组件multiSelector数据混乱

测试过的手机

手机型号 系统
mate60pro harmonyOS NEXT

示例代码

<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。

实际结果

  1. 数据展示异常
  2. 滑动第一列之后，第二列数据没了。

更多关于uni-app harmonyOS NEXT 页面内多个picker组件multiSelector数据混乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app harmonyOS NEXT 页面内多个picker组件multiSelector数据混乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，使用multiSelector模式的picker组件时，如果页面内存在多个picker组件，确实可能会遇到数据混乱的问题。这通常是由于事件处理逻辑不严谨或者数据绑定错误导致的。以下是一个示例代码，展示如何在同一页面中正确管理多个multiSelector picker组件，避免数据混乱。

<template>
  <view>
    <!-- Picker 1 -->
    <picker mode="multiSelector" :range="range1" @change="onPicker1Change" v-model="multiIndex1">
      <view class="picker">{{selectedText1}}</view>
    </picker>

    <!-- Picker 2 -->
    <picker mode="multiSelector" :range="range2" @change="onPicker2Change" v-model="multiIndex2">
      <view class="picker">{{selectedText2}}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      range1: [
        ['Option1-1', 'Option1-2', 'Option1-3'],
        ['SubOption1-1', 'SubOption1-2']
      ],
      range2: [
        ['Option2-1', 'Option2-2'],
        ['SubOption2-1', 'SubOption2-2', 'SubOption2-3']
      ],
      multiIndex1: [0, 0], // Initial selected indices for Picker 1
      multiIndex2: [0, 0], // Initial selected indices for Picker 2
      selectedText1: '',
      selectedText2: ''
    };
  },
  watch: {
    multiIndex1(newVal) {
      this.updateSelectedText1(newVal);
    },
    multiIndex2(newVal) {
      this.updateSelectedText2(newVal);
    }
  },
  methods: {
    updateSelectedText1(indices) {
      this.selectedText1 = indices.map(index => this.range1[0][index] + '-' + this.range1[1][this.multiIndex1[1]]).join(', ');
    },
    updateSelectedText2(indices) {
      this.selectedText2 = indices.map(index => this.range2[0][index] + '-' + this.range2[1][this.multiIndex2[1]]).join(', ');
    },
    onPicker1Change(e) {
      this.multiIndex1 = e.detail.value;
    },
    onPicker2Change(e) {
      this.multiIndex2 = e.detail.value;
    }
  }
};
</script>

<style>
.picker {
  padding: 20px;
  background-color: #f8f8f8;
  margin-bottom: 20px;
}
</style>

在这个示例中，我们定义了两个picker组件，每个组件都有自己的range和multiIndex数据。通过watch监听multiIndex的变化，并实时更新显示的文本selectedText，确保每个picker组件的数据是独立的，从而避免数据混乱。同时，每个picker组件的@change事件处理器独立处理各自的数据变化。这种方法保证了多个multiSelector picker组件在页面中可以正常工作而不会相互干扰。

回到顶部