uni-app HBuilderX 4.36 鸿蒙系统 picker组件的mode为"multiSelector"时直接闪退
uni-app HBuilderX 4.36 鸿蒙系统 picker组件的mode为"multiSelector"时直接闪退
操作步骤:
- 点击picker组件的mode="multiSelector"组件,直接闪退
预期结果:
- 正常使用,数据能联动
实际结果:
- 直接闪退
bug描述:
昨天升级版本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>
环境信息
项目 | 版本/信息 |
---|---|
产品分类 | uniapp/App |
PC开发环境操作系统 | Windows |
PC开发环境操作系统版本号 | win10 |
HBuilderX类型 | 正式 |
HBuilderX版本号 | 4.36 |
手机系统 | HarmonyOS NEXT |
手机系统版本号 | HarmonyOS NEXT Developer Beta2 |
手机厂商 | 华为 |
手机机型 | 纯血鸿蒙 |
页面类型 | vue |
vue版本 | vue3 |
打包方式 | 离线 |
项目创建方式 | HBuilderX |
更多关于uni-app HBuilderX 4.36 鸿蒙系统 picker组件的mode为"multiSelector"时直接闪退的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
在处理uni-app在鸿蒙系统上使用HBuilderX 4.36版本时,picker组件的mode设置为"multiSelector"导致的闪退问题时,首先需要确保代码本身没有逻辑错误,并且符合uni-app和鸿蒙系统的规范。以下是一个基本的代码示例,用于展示如何在uni-app中使用multiSelector模式的picker组件。请注意,由于我无法直接测试鸿蒙系统的具体表现,以下代码是基于uni-app官方文档和通用实践编写的,旨在提供一个正确的实现方式,以帮助你排查问题。
<template>
<view>
<button @click="showPicker">选择多项</button>
<view v-if="selectedItems.length">
<text>选中项:</text>
<view v-for="(item, index) in selectedItems" :key="index">
{{ item.text }}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
multiArray: [
{ text: '选项1-1', value: '1-1' },
{ text: '选项1-2', value: '1-2' },
// 更多选项...
],
selectedItems: []
};
},
methods: {
showPicker() {
uni.showActionSheet({
itemList: ['取消', '确定'],
success: (res) => {
if (res.tapIndex === 1) {
uni.showPicker({
mode: 'multiSelector',
range: this.multiArray.map(item => item.text),
rangeKey: 'text', // 注意:这里设置range的key,如果你的数据结构不同,需要调整
success: (res) => {
const selected = res.value;
this.selectedItems = selected.map(index => this.multiArray[index]);
console.log('选中的项:', this.selectedItems);
},
fail: (err) => {
console.error('picker失败:', err);
}
});
}
}
});
}
}
};
</script>
<style scoped>
/* 样式根据需要调整 */
</style>
此代码示例展示了如何使用uni.showPicker
方法来显示一个多选选择器(multiSelector)。注意以下几点:
- 数据结构:
multiArray
中的每个对象应包含text
和value
字段,text
字段用于显示,value
字段用于标识。 - rangeKey:在
uni.showPicker
的调用中,通过rangeKey
指定range
数组中对象的哪个属性用于显示。 - 错误处理:在
fail
回调中添加了错误处理,以便在picker调用失败时能够捕捉到错误信息。
如果代码本身没有问题,但问题依旧存在,可能需要考虑以下几个方向:
- 鸿蒙系统兼容性:检查uni-app和HBuilderX的官方文档,确认当前版本是否完全支持鸿蒙系统。
- 系统日志:查看鸿蒙系统的应用日志,寻找可能的崩溃原因。
- 社区和论坛:搜索是否有其他开发者遇到类似问题,并查看他们的解决方案。