uniapp微信小程序video全屏苹果xs

问题：页面头部是自定义的，video在轮播图里video点击全屏的时候其他手机正常，但是苹果xs只能占半屏

//顶部自定义头部组件
<navbar v-if="showNav" :title="title" :backShow="false"></navbar>//轮播图
<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :circular="true" :duration="duration" @change="swiperchange"><swiper-item v-for="(item,index) in mainInfo.banner" :key="index"><image :src="item.picture_url" mode="" class="swiper_img" @tap="onClickImg(item)" v-if="item.is_video == 0"></image><video id="myVideo" :src="item.video_url" class="swiper_img" v-if="item.is_video == 1" play-btn-position="center" controls @play="videoplay" @fullscreenchange="fullscreenchange" @pause="videopause"></video></swiper-item></swiper>

正常全屏图：

异常全屏图

后来发现是因为苹果xs将上面自定义的头部也一起全屏了，所以在头部组件上加了一个v-if，当判断是苹果手机时，如果是全屏状态就不显示头部，如果不是全屏状态就显示

//判断是否为苹果手机
IsAndroid(){var res = uni.getSystemInfoSync();var platform = res.platform;return platform == 'android'
},//点击全屏按钮时的回调
fullscreenchange(event){const {fullScreen} = event.detailif(this.IsAndroid()){this.showNav = true}else {if(fullScreen){this.showNav = false} else {this.showNav = true}}
},

uniapp微信小程序video全屏苹果xs相关推荐

uni-app 微信小程序实现全屏悬浮按钮可拖动，自动吸附边缘
原文链接:uni-app 微信小程序实现全屏客服按钮可拖动,自动吸边-小月博客效果图如下: html : <movable-area class="movableArea" ...
Uniapp微信小程序视频全屏播放功能极简实现法
*高端的食材,往往只需要最朴素的烹饪方式,本文用css旋转定位实现视频全屏播放,朴实无华,简单实用,本文为原创,分享请标明出处* 实习入职第三周,在经过两周的改bug和切图之后,组里说给我一个有挑战性 ...
微信小程序video全屏分分享按钮
1.研究全屏的分享并进行尝试,尝试三种方法,发现了巨巨巨多的坑,坑总结方法一:cover-view中包裹button和view-image踩坑 (1)cover-view里面包裹button,文档中 ...
家用电脑设置成小程序服务器,电脑微信小程序设置全屏的方法是什么
电脑微信小程序设置全屏的方法是什么方法:首先配置小程序resizeable的参数设置为true,这样操作可以在电脑端打开一个较大的横向窗口显示,屏幕大小是1024乘以768的,然后再按下全屏按钮,便 ...
微信小程序图片全屏预览组件，并解决svg真机显示黑屏问题
自己码了个微信小程序图片全屏预览组件,并解决了svg真机显示黑屏问题(即png等格式可以正常显示,但就svg无法显示). /*** 微信小程序图片预览组件* 1.支持预览svg.png.jpeg.jp ...
php电脑端打开微信页面大小,电脑微信小程序设置全屏的方法是什么？
方法:首先配置小程序resizeable的参数设置为true,这样操作可以在电脑端打开一个较大的横向窗口显示,屏幕大小是1024乘以768的,然后再按下全屏按钮,便可实现微信小程序在电脑端的全屏模式. ...
微信小程序视频全屏显示4种方式
视频全屏显示4种方式示例库代码片段
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
uniapp - 微信小程序接入腾讯视频播放器功能插件，uniapp开发微信小程序端调用引入并使用腾讯视频播放组件完整全流程（详细示例源码，一键复制开箱即用）
效果图在uniapp 微信小程序项目中,集成腾讯视频功能插件,实现播放腾讯视频效果,附带详细示例源码及注释, 你可以跟着步骤一步步来,保证几分钟就能快速在uniapp小程序项目中植入腾讯视频功能! ...

uniapp微信小程序video全屏苹果xs

uniapp微信小程序video全屏苹果xs相关推荐

最新文章

热门文章