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

最新推荐文章于 2026-03-15 19:27:21 发布

原创

最新推荐文章于 2026-03-15 19:27:21 发布 · 2.2k 阅读

标签

#uni-app

收录于

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

最近在做一个注册页面，背景是一个视频。由于使用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>
		<view class="register-top">
				<text class="text1">
				嗨~
				</text>
				<text class="text1">
				啦啦啦 
				</text>
				<text class="text2 text2