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

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

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

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

话不多说上代码

<template><view class="login-box" :style="{height:screenHeight+'px'}"><view class="video-background"><videoid="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 text22">nvue每一个text标签就是一行</text></view></view>
</template><script lang="ts">
import {defineComponent, ref, reactive,
} from 'vue'export default defineComponent({name: 'PageRegister',setup() {// 获取屏幕高宽function getScreenHeight():void {const that = thisuni.getSystemInfo({success(res:any) {// #ifndef H5that.screenHeight = res.screenHeight// #endif// #ifdef H5console.log(res)that.screenHeight = res.windowHeight// #endif// 判断menuBtnLeft 是否为0if (that.getMenuBtnInfoCom.left === 0) {// 如果为0,代表没胶囊。屏幕宽度-左边的安全距离-定位的宽度-右边的安全距离-预留小小位置，剩余便是搜索栏宽度that.searchBarWidth = (res.screenWidth - 24 - 60 - 24 - 30)} else {// 算出比例const p = res.windowWidth / 750that.searchBarWidth = that.getMenuBtnInfoCom.left - (48 * p) - 20}},})uni.setStorageSync('screenInfo', that.screenHeight)}return {VideoContext,getScreenHeight,screenHeight}},onShow() {// 当app切到后台再切回前台的时候会触发onShow这个时候视频应该继续播放，不这样做视频会暂停的this.$nextTick(() => {this.VideoContext = uni.createVideoContext('videoRef', this)this.VideoContext.play()})this.getScreenHeight()},
})</script><style scoped lang="scss">$text-muted: #999;$text-light: #fff;
.login-box {position: relative;padding-left: 56rpx;padding-right: 56rpx;.video-background {position: absolute;top: 0;right: 0;left: 0;bottom: 0;/* #ifdef MP-WEIXIN || H5 */width: 100vw;height:100vh;/* #endif */.video {position: absolute;top: 0;right: 0;left: 0;bottom: 0;/* #ifdef MP-WEIXIN || H5 */width: 100%;height: 100%;/* #endif */}}
}
</style>

最后发现app下面显示不全，经过调试发现需要给页面一个高度，所以直接获取系统的高度动态赋值给login-box。就是第一行内容：

 <view class="login-box" :style="{height:screenHeight+'px'}">

uniapp中登录注册页面以视频为背景相关推荐

jsf登录注册页面_您将在下一个项目中使用JSF吗？
jsf登录注册页面上周有一篇很棒的stackoverflow博客文章,主题是" Javascript框架的残酷生命周期" . 这篇文章是关于Javascript UI框架(ang ...
HTML+CSS+JavaScript 实现登录注册页面(超炫酷)
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
Axure-蒙版遮罩，鼠标移入移出点击效果设置，登录注册页面
第二章主要讲解蒙版遮罩,鼠标移入移出点击效果设置及登录注册页面蒙版遮罩就是用和页面大小的并且设置为半透明灰色的矩形盖住原有的页面,与某一元件相关联系(在"交互"中添加" ...
如何设计出用户体验良好的登录/注册页面
对于开发者来说登录/注册页面是再熟悉不过的了,然而要想提供更好的登录/注册体验的话就需要一些技巧了.应用了下面这些小技巧的话,你的登录注册页面在实现基本功能的同时还能提供非常流畅的体验. 1.不要将& ...
php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
JavaWeb项目(登录注册页面)全过程详细总结
文章目录 JavaWeb项目(登录注册页面)全过程总结一.环境准备与开发工具二.创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录 ...
php and mysql登录注册页面
本文将基于PHP以及mysql设计一个最最基础的登录注册页面,所用到的软件有wampserver以及各种PHP编译器,我选择的是,vscode. 第一部分先写个连接数据库文件. conn.php &l ...
登录注册页面的示例代码
下面是使用Vue3和element-plus写登录注册页面的示例代码: 首先,在main.js文件中引入Vue和element-plus组件库: import { createApp } from ' ...
做登录/注册页面需考虑哪些问题？
[文章摘要]现在人手一部手机的前提下,手机号登录/注册的方式无疑是最简单直接的方式.而且现在很多其他注册方式,到后面还是会引导用户去绑定手机. 这几天在做登录/注册页面.做之前看了很多其他公司的登录/ ...

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

uniapp中登录注册页面以视频为背景相关推荐

最新文章

热门文章