深深居网络
深深居网络
  • 发布:2021-02-09 11:18
  • 更新:2021-02-18 10:13
  • 阅读:567

【报Bug】nvue 下iOS 多个video 显示不正常。h5 和安卓显示正常

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 11.2

HBuilderX类型: 正式

HBuilderX版本号: 3.1.2

手机系统: iOS

手机系统版本号: IOS 14

手机厂商: 模拟器

手机机型: iphone 11

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<template>
<view class="progress-works">
<view class="item-box">
<image :style="{height:imgWidth+'px',width:imgWidth+'px',}" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg"
@error="imageError"></image>
<video id="myVideo2" :style="{height:imgWidth+'px',width:imgWidth+'px',}" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>

    </view>  
    <view class="item-box">  

        <video id="myVideo1" :style="{height:imgWidth+'px',width:imgWidth+'px',}" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"  
                                @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>  
        <video id="myVideo2" :style="{height:imgWidth+'px',width:imgWidth+'px',}" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"  
                                @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls>  
            <cover-image :style="{height:imgWidth+'px',width:imgWidth+'px'}"  src="/static/images/video-start-1.png"></cover-image>                   
        </video>  

    </view>  
</view>  

</template>

<script>

export default{  
    data() {  
        return {  

            imgWidth:0,  

        }  
    },  
    onLoad(options) {  
        let self_ = this  
        //获取状态栏高度 加上导航的高度  
        uni.getSystemInfo({  
            success: function (res) {  
                // 32 左右空隙 9 进度宽度 16 左边距离 16 三张图片中间空隙  
                self_.imgWidth = (res.windowWidth - 32 - 9 - 16 - 16)/3  
            }  
        });  

    },  

}  

</script>

<style lang="scss" scoped>

.progress-works{  
    /* #ifndef APP-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: column;  
}  
.item-box{  
    /* #ifndef APP-NVUE */  
    display: flex;  
    /* #endif */  
    flex-direction: row;  
    margin-top: 100rpx;  
}  

</style>

操作步骤:

如上述描述

预期结果:

显示位置正常 且点击正常

实际结果:

显示位置偏差 点击没反应
不管是video和video 还是image 和video 中间都是显示空白

bug描述:

两个video 并列 后面的video显示不正常。 该显示的位置显示空白。 位置后移了一位 然后后面的video 点击也没有反应

2021-02-09 11:18 负责人:无 分享
已邀请:
DCloud_uniAD_HDX

DCloud_uniAD_HDX

请提供测试工程

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