在uni-app真机上video覆盖coverView时文字展示不全总会遮挡一点

在uni-app真机上video覆盖coverView时文字展示不全总会遮挡一点

示例代码:

<swiper class="swiper" :vertical="true" @change="swiperChange" :current="current" :disable-touch="false">  
<swiper-item v-for="(item, index) in videoList" :key="index">  
<video v-if="Math.abs(current - index) <= 1" :id="'video_' + index" class="video"  
style="[{ width: ${screenWidth}px, height: ${screenHeight}px }]" :autoplay="current === index"
loop="true" :show-play-btn='true' play-btn-position='center' :show-fullscreen-btn='false'
objectFit="contain" :controls="true" :enable-progress-gesture='false' :show-center-play-btn='false'  
src="getRightImgUrl(item.videoUrl)" :initial-time="0" :codec="hardware" :http-cache="true"
enable-play-gesture="true" :direction="0" :show-loading="true" :show-progress="false"
@waiting="onVideoWaiting" @error="onVideoError">
<cover-view v-if="current !== index" class="video-cover"  
style="[{ width: ${screenWidth}px, height: ${screenHeight}px }]"
>
</cover-view> 
<cover-view class="minfo flex flex-column justify-start align-start" v-if="showMinfo">  
<cover-view class="user-info">  
<cover-image :src="item.avatar" class="avatar" @click="gotoUserDetail(item)">
</cover-image>  
<cover-view class="nickname">{{ item.nickname }}</cover-view>  
<cover-view class="follow-btn" 
class="[item.follow ? 'followed' : 'unfollowed', isFollowAnimating ? 'animating' : '']"
@click="followAction(item)">
<cover-view v-if="!isFollowAnimating"> {{ item.follow ? '已关注' : '关注' }} </cover-view>
<cover-view v-else class="follow-animation">
<cover-view class="follow-icon">✓</cover-view>
</cover-view>
</cover-view>
</cover-view>
<cover-view class="video-title">{{ item.title }}</cover-view>  
<cover-view class="video-desc">{{ item.desc }}</cover-view>  

<!-- 添加分类标签展示 -->  
<cover-view class="category-list my-3" v-if="item.categorys?.length">  
{{getCategorys(item.categorys)}}  
</cover-view>  

<cover-view class="action-bar">  
<cover-view class="comment-btn" @click="showDetail">  
<cover-image src="../image/bianji.png" style="width: 20px;height: 20px;">
</cover-image>  
<cover-view class="text">说点什么...</cover-view>  
</cover-view>  

<cover-view class="action-btns">  
<cover-view class="action-item" @click="likeAction(item)">  
<cover-image v-if="item.like" src="../image/heart-fill.png"  
class="icon">
</cover-image>  
<cover-image v-else src="../image/heart.png" class="icon">
</cover-image>  
<cover-view class="ml-1 count">{{ formatCount(item.likenum) }}</cover-view>  
</cover-view>  

<cover-view class="action-item" @click="collectAction(item)">  
<cover-image v-if="item.collect" src="../image/star-fill.png"  
class="icon">
</cover-image>  
<cover-image v-else src="../image/star.png" class="icon">
</cover-image>  
<cover-view class="ml-1 count">{{ formatCount(item.collectnum) }}</cover-view>  
</cover-view>  

<cover-view class="action-item" @click="showDetail">  
<cover-image src="../image/chat.png" class="icon">
</cover-image>  
<cover-view class="ml-1 count">{{ formatCount(item.commentnum) }}</cover-view>  
</cover-view>  

<cover-view class="action-item" @click="showShare">  
<cover-image src="../image/more-dot-fill.png" class="icon">
</cover-image>  
</cover-view>  
</cover-view>  
</cover-view>  
</video>  
<image v-else class="video-poster" :style="[{ width: ${screenWidth}px, height: ${screenHeight}px }]"  
src="getRightImgUrl(item.coverImage || item.videoUrl + '?x-oss-process=video/snapshot,t_1000,f_jpg')"
mode="aspectFit">
</image>
</swiper-item>
</swiper>

操作步骤:

video中写几个cover-view标签,然后flex布局一下就有这个问题,在真机中展示

预期结果:

cover-view文字在真机中正常展示

实际结果:

cover-view中的文字有缺失
项目创建方式 开发环境 版本号
HBuilderX Mac 4.45
macOS Ventura 13.6 4.45
基础库 3.62

更多关于在uni-app真机上video覆盖coverView时文字展示不全总会遮挡一点的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

有人给解决一下吗

更多关于在uni-app真机上video覆盖coverView时文字展示不全总会遮挡一点的实战教程也可以访问 https://www.itying.com/category-93-b0.html


建议你新建一个uniapp的空项目调试下,有问题可以直接上传空项目出来,有现有项目的话可以调一下,你上面的代码属实没用,可以将变量全部写死

回到顶部