在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的空项目调试下,有问题可以直接上传空项目出来,有现有项目的话可以调一下,你上面的代码属实没用,可以将变量全部写死