【报Bug】异步赋值 v-for渲染图片导致map组件错位

分类：uni-app

vue3 map image 异步执行 bug已修复

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win10

HBuilderX类型：正式

HBuilderX版本号： 3.3.11

手机系统： Android

手机系统版本号： Android 11

手机厂商：华为

手机机型：荣耀8X(鸿蒙系统)

页面类型： vue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<template>  
    <view class="content-box">  
        <view style="width: 100%;height: 1000rpx;">占位</view>  
        <view class="image-box">  
            <image class="image" v-for="(item, index) in info" :key="index" :src="item"></image>  
        </view>  
        <view class="map-box">  
            <map id="map"></map>  
        </view>  
    </view>  
</template>  

<script setup>  
    import {  
        ref,  
        reactive,  
        computed,  
        watch,  
        nextTick  
    } from 'vue'  
    import {  
        onLoad,  
        onShow,  
        onUnload,  
        onReady  
    } from '@dcloudio/uni-app';  

    const info = ref([])  

    onReady(() => {  
        setTimeout(() => {  
            info.value = ['https://t7.baidu.com/it/u=1415984692,3889465312&fm=193&f=GIF',  
                'https://t7.baidu.com/it/u=1415984692,3889465312&fm=193&f=GIF',  
                'https://t7.baidu.com/it/u=1415984692,3889465312&fm=193&f=GIF'  
            ]  
        }, 1000)  

    })  
</script>  

<style lang="scss" scoped>  
    .image {  
        width: 100rpx;  
        height: 100rpx;  
    }  

    .image-box {  
        border: 1px solid;  
        margin: 32rpx -12rpx;  

        &>* {  
            margin: 10rpx 12rpx;  
        }  
    }  

    .content-box {  
        padding: 0 32rpx 100rpx;  
    }  

    .map-box {  
        width: 100%;  
        height: 600rpx;  

        map {  
            width: 100%;  
            height: 600rpx;  
        }  
    }  
</style>

操作步骤：

<template>  
    <view class="content-box">  
        <view style="width: 100%;height: 1000rpx;">占位</view>  
        <view class="image-box">  
            <image class="image" v-for="(item, index) in info" :key="index" :src="item"></image>  
        </view>  
        <view class="map-box">  
            <map id="map"></map>  
        </view>  
    </view>  
</template>  

<script setup>  
    import {  
        ref,  
        reactive,  
        computed,  
        watch,  
        nextTick  
    } from 'vue'  
    import {  
        onLoad,  
        onShow,  
        onUnload,  
        onReady  
    } from '@dcloudio/uni-app';  

    const info = ref([])  

    onReady(() => {  
        setTimeout(() => {  
            info.value = ['https://t7.baidu.com/it/u=1415984692,3889465312&fm=193&f=GIF',  
                'https://t7.baidu.com/it/u=1415984692,3889465312&fm=193&f=GIF',  
                'https://t7.baidu.com/it/u=1415984692,3889465312&fm=193&f=GIF'  
            ]  
        }, 1000)  

    })  
</script>  

<style lang="scss" scoped>  
    .image {  
        width: 100rpx;  
        height: 100rpx;  
    }  

    .image-box {  
        border: 1px solid;  
        margin: 32rpx -12rpx;  

        &>* {  
            margin: 10rpx 12rpx;  
        }  
    }  

    .content-box {  
        padding: 0 32rpx 100rpx;  
    }  

    .map-box {  
        width: 100%;  
        height: 600rpx;  

        map {  
            width: 100%;  
            height: 600rpx;  
        }  
    }  
</style>