picker组件遇到的问题

使用picker组件时，网页使用正常，在苹果手机上调试时出现，点击后未弹出选择框，有时候弹出框闪了一下就消失了，多次点击后才能显示选择框，因为文字不好描述，具体问题可以看下方视频附件，求大神们帮忙看下是什么问题
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<picker mode="selector" :range="array" @change="bindPickerChange":value="index" range-key="name">
<view>{{array[index].name}}</view>
</picker>

    </view>  
</view>  

</template>

<script>
export default {
data() {
return {
title: 'Hello',
array: [{name:'中国'},{name: '美国'}, {name:'巴西'}, {name:'日本'}],
index: 0
}
},
onLoad() {

    },  
    methods: {  
        bindPickerChange: function(e) {  
            this.index = e.detail.value  
        }  

    }  
}  

</script>

<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.logo {  
    height: 200rpx;  
    width: 200rpx;  
    margin-top: 200rpx;  
    margin-left: auto;  
    margin-right: auto;  
    margin-bottom: 50rpx;  
}  

.text-area {  
    display: flex;  
    justify-content: center;  
}  

.title {  
    font-size: 36rpx;  
    color: #8f8f94;  
}  

</style>