uniapp中登录注册页面以视频为背景

最新推荐文章于 2024-06-20 18:12:35 发布

GotYoung

最新推荐文章于 2024-06-20 18:12:35 发布

阅读量1.7k

点赞数

分类专栏： uniapp 文章标签： uni-app

本文链接：https://blog.csdn.net/GotYoung/article/details/127906140

版权

在uniapp开发过程中，为注册页面设置视频背景时遇到问题。官方推荐使用nvue来处理涉及视频的页面。由于在App端nvue页面无法设置高度，需通过CSS条件编译来解决。最终解决方案是获取系统高度并动态赋值给页面容器，以确保在App下正常显示。

摘要由CSDN通过智能技术生成

最近在做一个注册页面，背景是一个视频。由于使用uniapp开发的，所以这坑只能慢慢爬

官网建议使用nvue做关于视频的页面。所以这个页面也是用nvue做的。

大坑：在app端使用nvue页面不能设置高度，所以需要设置高度的地方在CSS中使用条件编译

话不多说上代码

<template>
	<view class="login-box" :style="{height:screenHeight+'px'}">
		<view class="video-background">
			<video
				id="videoRef"
				src="https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/bg1.mp4"
				object-fit="cover"
				:autoplay="true"
				:controls="false"
				:muted="true"
				:loop="true"
				:enable-progress-gesture="false"
				class="video"
			/>
		</view&g