1***@qq.com
1***@qq.com
  • 发布:2021-05-12 15:30
  • 更新:2021-05-12 15:30
  • 阅读:689

【报Bug】uniapp picker mode = selector的时候,range = [ ]为空数组的时候会控制台报错,并导致页面直接渲染不出来

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: window10家庭中文版

HBuilderX类型: 正式

HBuilderX版本号: 3.1.14

手机系统: Android

手机系统版本号: Android 11

手机厂商: 华为

手机机型: NLS-MT66

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

markdown:"
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-title uni-common-pl">普通选择器</view>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
当前选择
</view>
<view class="uni-list-cell-db">
<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
<view class="uni-input">{{array[index].name}}</view>
</picker>
</view>
</view>
</view>

    <!-- #ifndef MP-ALIPAY -->  
    <view class="uni-title uni-common-pl">多列选择器</view>  
    <view class="uni-list">  
        <view class="uni-list-cell">  
            <view class="uni-list-cell-left">  
                当前选择  
            </view>  
            <view class="uni-list-cell-db">  
                <picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">  
                    <view class="uni-input">{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}</view>  
                </picker>  
            </view>  
        </view>  
    </view>  
    <!-- #endif -->  

    <view class="uni-title uni-common-pl">时间选择器</view>  
    <view class="uni-list">  
        <view class="uni-list-cell">  
            <view class="uni-list-cell-left">  
                当前选择  
            </view>  
            <view class="uni-list-cell-db">  
                <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">  
                    <view class="uni-input">{{time}}</view>  
                </picker>  
            </view>  
        </view>  
    </view>  
    <view class="uni-picker-tips">  
        注:选择 09:01 ~ 21:01 之间的时间, 不在区间内不能选中  
    </view>  

    <view class="uni-title uni-common-pl">日期选择器</view>  
    <view class="uni-list">  
        <view class="uni-list-cell">  
            <view class="uni-list-cell-left">  
                当前选择  
            </view>  
            <view class="uni-list-cell-db">  
                <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">  
                    <view class="uni-input">{{date}}</view>  
                </picker>  
            </view>  
        </view>  
    </view>  
    <view class="uni-picker-tips">  
        注:选择当前时间 ±10 年之间的时间, 不在区间内不能选中  
    </view>  
</view>  

</template>
<script>

function getDate(type) {  
    const date = new Date();  

    let year = date.getFullYear();  
    let month = date.getMonth() + 1;  
    let day = date.getDate();  

    if (type === 'start') {  
        year = year - 10;  
    } else if (type === 'end') {  
        year = year + 10;  
    }  
    month = month > 9 ? month : '0' + month;;  
    day = day > 9 ? day : '0' + day;  

    return `${year}-${month}-${day}`;  
}  
export default {  
    data() {  
        return {  
            title: 'picker',  
            array: [], // 将第一个picker的range设置为空数组,会直接导致页面渲染不出来,并报错,该示例为官网demo页面修改  
            index: 0,  
            multiArray: [  
                ['亚洲', '欧洲'],  
                ['中国', '日本'],  
                ['北京', '上海', '广州']  
            ],  
            multiIndex: [0, 0, 0],  
            date: getDate({  
                format: true  
            }),  
            startDate:getDate('start'),  
            endDate:getDate('end'),  
            time: '12:01'  
        }  
    },  
    methods: {  
        bindPickerChange: function(e) {  
            console.log('picker发送选择改变,携带值为:' + e.detail.value)  
            this.index = e.detail.value  
        },  
        bindMultiPickerColumnChange: function(e) {  
            console.log('修改的列为:' + e.detail.column + ',值为:' + e.detail.value)  
            this.multiIndex[e.detail.column] = e.detail.value  
            switch (e.detail.column) {  
                case 0: //拖动第1列  
                    switch (this.multiIndex[0]) {  
                        case 0:  
                            this.multiArray[1] = ['中国', '日本']  
                            this.multiArray[2] = ['北京', '上海', '广州']  
                            break  
                        case 1:  
                            this.multiArray[1] = ['英国', '法国']  
                            this.multiArray[2] = ['伦敦', '曼彻斯特']  
                            break  
                    }  
                    this.multiIndex.splice(1, 1, 0)  
                    this.multiIndex.splice(2, 1, 0)  
                    break  
                case 1: //拖动第2列  
                    switch (this.multiIndex[0]) { //判断第一列是什么  
                        case 0:  
                            switch (this.multiIndex[1]) {  
                                case 0:  
                                    this.multiArray[2] = ['北京', '上海', '广州']  
                                    break  
                                case 1:  
                                    this.multiArray[2] = ['东京','北海道']  
                                    break  
                            }  
                            break  
                        case 1:  
                            switch (this.multiIndex[1]) {  
                                case 0:  
                                    this.multiArray[2] = ['伦敦', '曼彻斯特']  
                                    break  
                                case 1:  
                                    this.multiArray[2] = ['巴黎', '马赛']  
                                    break  
                            }  
                            break  
                    }  
                    this.multiIndex.splice(2, 1, 0)  
                    break  
            }  
            this.$forceUpdate()  
        },  
        bindDateChange: function(e) {  
            this.date = e.detail.value  
        },  
        bindTimeChange: function(e) {  
            this.time = e.detail.value  
        }  

    }  
}  

</script>

<style>
.uni-picker-tips {
font-size: 12px;
color: #666;
margin-bottom: 15px;
padding: 0 15px;
/ text-align: right; /
}
</style>
"

操作步骤:

本地使用HBuilder新建一个uniapp项目,选择hell uniapp模板直接生成。将pages/component/picker/picker.vue里面的array设置为[ ]空数组,运行到浏览器打开,进入表单组件---picker演示页面会发现页面全部无法渲染出来

预期结果:

进入表单组件---picker演示页面会发现页面全部无法渲染出来

实际结果:

进入表单组件---picker演示页面会发现页面全部无法渲染出来

bug描述:

uniapp picker mode = selector的时候,range = [ ]为空数组的时候会控制台报错,并导致页面直接渲染不出来,使用的示例为官网hello uniapp模板示例

2021-05-12 15:30 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复