uni-app [HBuilderX 4.36] 鸿蒙系统 picker组件的mode="multiSelector" 直接闪退

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app [HBuilderX 4.36] 鸿蒙系统 picker组件的mode=“multiSelector” 直接闪退

昨天升级版本HBuilderX 4.36版本, 鸿蒙系统 picker组件的mode=“multiSelector”,直接闪退 其他系统都正常显示。之前用的版本是HBuilderX 4.26版本,鸿蒙系统能正常显示,只是不能联动

代码如下:

<template>  
  <view class="pca-picker-cc">  
    <picker mode="multiSelector" @cancel="pickerClose()" @columnchange="bindMultiPickerColumnChange" @change="change" :value="multiIndexArr" :range="multiArray">  
      <slot></slot>  
    </picker>  
  </view>  
</template>  

<script>  
let _self;  
export default {  
  name: "pca-picker-cc",  
  // 此处定义传入的数据  
  props: {  
    addressList: {  
      type: Array,  
      default: []  
    },  
    resultDTO: {  
        type: Array,  
        default: []  
    },  
    isDefault:{ // 是否展示默认提示语  
      type: Boolean,  
      default: true  
    }  
  },  
  computed: {  
    multiIndexArr(){  
      return [this.provinceIndex, this.cityIndex, this.countyIndex];  
    },  
    province() {  
      return this.provinceList[this.provinceIndex] || {};  
    },  
    provinceList() {  
      return this.data;  
    },  
    provinceNameList() {  
      return this.provinceList.map((item, index) => item.text || '');  
    },  
    city() {  
      return this.cityList[this.cityIndex] || {};  
    },  
    cityList() {  
      return this.province.children || [];  
    },  
    cityNameList() {  
      return this.cityList.map((item, index) => item.text || '');  
    },  
    county() {  
      return this.countyList[this.countyIndex] || {};  
    },  
    countyList() {  
      return this.city.children || [];  
    },  
    countyNameList() {  
      return this.countyList.map((item, index) => item.text || '');  
    },  
    multiArray() {  
      return [this.provinceNameList, this.cityNameList, this.countyNameList];  
    },  
    addressResultObj() {  
      return {province: this.province, city: this.city, county: this.county};  
    },  
    addressResultList(){  
      return Object.values(this.addressResultObj).map((item, index) => item.text || '');  
    }  
  },  
  data() {  
    return {  
      data: [],  
     // resultDTO:[],  
      provinceIndex: 0,  
      cityIndex: 0,  
      countyIndex: 0,  
      keys: ['province', 'city', 'county'],  
      upDown:false,  
    };  
  },  
  //在实例创建完成后被立即调用。  
  mounted() {  
    _self = this;  
   _self.data = this.resultDTO;  
    if(_self.isDefault){  
      _self.init();  
    }  
  },  
  methods: {  
  // 获取数据  
  // async loadData() {  
    // const result = await this.$axios(this.$baseUrl.schooSelectAllRegion);  
    // this.resultDTO = fn.FuncUnzip(result.data.obj);  
    // console.log("resultDTO1", this.resultDTO)  
    // _self.data = this.resultDTO;  
    // console.log("_self.data:",this.resultDTO)  
    // _self.init();  
  // },  

    init() {  
      if (this.addressList.length === 3) {  
        let key, index;  
        for (let i in this.keys) {  
          key = this.keys[i];  
          index = this[`${key}NameList`].indexOf(this.addressList[i]);  
          if (index <= -1) {  
            index = 0;  
          }  
          this.$data[`${key}Index`] = index;  
        }  
        this.change();  
      }  
    },  
    bindMultiPickerColumnChange: function (e) {  
      let index = e.detail.column;  
      let key = this.keys[index];  
      this.$data[`${key}Index`] = e.detail.value;  
      while (index < this.keys.length) {  
        index++;  
        key = this.keys[index];  
        this.$data[`${key}Index`] = 0;  
      }  
    },  
    change(e){  
      // console.log(e)  
      this.$emit('update:addressList', this.addressResultList);  
      this.$emit('getAddressResultObj', this.addressResultObj);  
      this.$emit('pickerClose', this.upDown);  
    },  
    pickerClose(){  
        this.$emit('pickerClose', this.upDown);  
    }  
  }  
}  
</script>  

<style lang="scss">  
</style>  

更多关于uni-app [HBuilderX 4.36] 鸿蒙系统 picker组件的mode="multiSelector" 直接闪退的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app [HBuilderX 4.36] 鸿蒙系统 picker组件的mode="multiSelector" 直接闪退的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对你提到的在uni-app中使用picker组件的mode="multiSelector"在鸿蒙系统上直接闪退的问题,这通常是由于系统兼容性问题或者组件实现上的差异导致的。下面提供一个基础的multiSelector picker组件的代码示例,并给出一些可能的调试方向,但请注意,由于无法直接复现和测试鸿蒙系统的具体行为,这些建议可能需要根据实际情况进行调整。

代码示例

首先,确保你的uni-app项目已经正确配置了picker组件,并尝试使用以下代码:

<template>
  <view>
    <button @click="showPicker">选择多项</button>
    <view v-for="(item, index) in selectedItems" :key="index">
      {{ item }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [],
      multiArray: [
        ['苹果', '香蕉', '橙子'],
        ['红色', '绿色', '蓝色'],
        ['大', '中', '小']
      ],
      multiIndex: [0, 0, 0]
    };
  },
  methods: {
    showPicker() {
      uni.showActionSheet({
        itemList: ['选择'],
        success: (res) => {
          if (res.tapIndex === 0) {
            this.pickerMultiSelector();
          }
        }
      });
    },
    pickerMultiSelector() {
      uni.showPicker({
        mode: 'multiSelector',
        range: this.multiArray,
        value: this.multiIndex,
        success: (res) => {
          this.multiIndex = res.value;
          this.selectedItems = this.multiArray.map((arr, index) => arr[this.multiIndex[index]]);
        }
      });
    }
  }
};
</script>

调试方向

  1. 检查uni-app版本:确保你使用的uni-app版本支持鸿蒙系统,并且已经修复了相关的bug。

  2. 鸿蒙系统API兼容性:查看uni-app的官方文档或社区,了解是否有关于鸿蒙系统picker组件的特殊说明或限制。

  3. 日志输出:在picker的success和fail回调中添加日志输出,查看是否触发了某个错误回调,从而获取更多错误信息。

  4. 简化测试:尝试简化picker的选项和数据,逐步排查是哪部分数据或逻辑导致了闪退。

  5. 原生插件:如果问题依旧存在,考虑是否可以通过编写原生插件来替代uni-app的picker组件,以利用鸿蒙系统的原生API。

由于鸿蒙系统的特殊性,以上建议可能需要结合实际的开发环境和鸿蒙系统的具体版本进行调试。

回到顶部