【uniapp】 video视频层级、遮挡其他弹窗或顶部导航 使用nvue覆盖

uniapp 顶部导航和弹窗被video遮挡解决办法

第一步:配置 subNVues

{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app","navigationStyle": "custom","app-plus": {"titleNView": false, //禁用原生导航栏"subNVues": [{"id": "subnvue", //顶部导航配置"path": "pages/index/subnvue","type": "navigationBar"},{"id": "drawer","path": "pages/index/drawer.nvue", // 配置分享弹窗"style": {"position": "popup","width": "100%","background": "rgba(0,0,0,0.6)"}}]}}}

第二步:分别在index文件夹下建立三个文件分别为:index.vue 、drawer.nvue、subnvue.nvue文件

第三步:index.vue

<template><view class="home"><view class="home-h"><video object-fit="cover" :src="videoUrl2" poster="https://img0.baidu.com/it/u=1678650643,2593729507&fm=253&fmt=auto&app=138&f=JPEG?w=906&h=500"></video><view class="home-title-info"><view class="home-title-tips"><text>免费</text><text>6万+ 人最近报名</text></view><view class="home-title">CAD2020速成班【零基础入门到精通】</view></view></view><view class="home-desc"><view class="home-title">课程目录</view><view class="home-title2">课程名称 : 全栈开发实战视频课程</view><imagesrc="https://img1.baidu.com/it/u=2412284462,1528860568&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1685552400&t=00023e9d720d0d598b47044bc7078124"mode="widthFix"style="margin-top: 20rpx;width: 100%;"></image><view class="home-text">课程简介:本视频教程由资深全栈工程师团队录制,旨在通过实战项目案例,从零开始让学习者掌握全栈开发技能,包括前端、后端、数据库等方面的知识。课程内容涵盖了HTML、CSS、JavaScript、Vue.js、Node.js、Express、MongoDB 等最新流行的前后端技术,并针对实际应用场景进行详细讲解,让学习者真正理解技术的本质和应用。 课程特点:实战为主,通过逐步构建完整的项目和模块,让学习者在实际操作中熟练掌握技能和方法。 涵盖全栈开发基础知识和高级应用场景,以及备受关注的 Node.js 和 Vue.js 技术。由行业资深工程师团队亲自录制,内容全面且深入浅出,生动易懂,可让初学者或有一定经验的开发人员都能轻松上手。在初级到高级的各个阶段,都配有多个具体难点及技巧的案例视频,让学习者快速掌握开发技能及实战经验。 配备大量代码示例和模板,可以加快学习者自主学习和完成实践任务。目标学习人群:本教程适合对全栈开发感兴趣的学习者,尤其是希望通过实际项目学习完整技术链路的新手和有基础进阶的开发工程师。需要具备一定的编程基础知识,包括HTML、CSS、JavaScript 等,或具备其他编程语言相关经验,如 Python、Java等。<imagestyle="width: 100%;margin: 10rpx 0;"src="https://img2.baidu.com/it/u=1711732258,3382239816&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1685552400&t=1814a851132581dc5773480345b497ba"mode="widthFix"></image>学习收获: 学习者将掌握最新前后端开发技能,熟练掌握 HTML、CSS、JavaScript 前端语言、Vue.js 前端框架、Node.js 后端语言以及 MongoDB 数据库等技能。了解全栈开发中的综合性条漏和思路,并将学会在真实场景中进行全栈开发,为你的下一次项目积累实战技能。 能够牢固掌握更多前端为服务器准备编写请求与远程响应的知识。让学习者在多样化的实际场景和应用中,把技能转化为实际收益。 学习者将拥有更广阔的职业发展空间,包括全栈工程师、前端开发工程师、后端开发工程师等多个角色。总之,本视频教程是一条涵盖广泛且实用性极高的路径,让学习者不再被单纯粗暴地困住于技术点上,并能真正适应未来更多元需求的研发环境中。</view></view></view>
</template>
<script>
export default {components: {},data() {return {videoUrl2: 'https://zhiyuanhuyu.oss-cn-nanjing.aliyuncs.com/uploads/files/b2/dca4476575c9910ce75ffc8c345f16.mp4'};},onLoad() {this.initShowDrawer(1);/*** 顶部导航** */uni.$on('openShare', res => {if (res.type == 1) {//分享this.initShowDrawer(2);}});/*** popup弹窗** */uni.$on('funDrawer', res => {if (res.type == 1) {//关闭弹窗this.initShowDrawer(1);}});},methods: {initShowDrawer(type) {if (type == 1) {//关闭uni.getSubNVueById('drawer').hide();} else if (type == 2) {//打开弹窗uni.getSubNVueById('drawer').show();}}}
};
</script>
<style lang="scss">
page {background-color: #f1f1f1;
}
.home {width: 100%;font-size: 24rpx;font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;.home-title2 {width: 100%;font-size: 28rpx;font-weight: 600;margin-top: 20rpx;}.home-text {width: 100%;margin-top: 20rpx;font-size: 24rpx;line-height: 40rpx;color: #666;}.home-desc {width: 100%;background-color: #fff;border-radius: 20rpx 20rpx 0 0;margin-top: 20rpx;padding: 24rpx;box-sizing: border-box;.home-title {width: 100%;font-size: 30rpx;font-weight: 600;}}.home-h {width: 100%;background-color: #fff;border-radius: 0 0 20rpx 20rpx;video {width: 100%;height: 400rpx;}.home-title-info {width: 100%;padding: 24rpx;box-sizing: border-box;.home-title-tips {width: 100%;display: flex;align-items: center;justify-content: space-between;text:first-child {color: #ff5500;font-size: 28rpx;}text:last-child {color: #999;font-size: 22rpx;}}.home-title {width: 100%;margin-top: 10rpx;font-size: 30rpx;font-weight: 600;}}}
}
</style>

 第四步:drawer.nvue

<template><view class="drawer"><image @click="closePop" class="close" src="../../static/7.png" mode=""></image><view class="drawer-box-title"><text class="drawer-box-title-text">分享</text></view><view class="drawer-box"><block v-for="(item, i) in list" :keep-index="i"><view class="drawer-box-item" @click="funShare(item)"><image class="drawer-box-item-img" :src="item.path" mode=""></image><text class="drawer-box-item-text">{{ item.name }}</text></view></block></view></view>
</template><script>
export default {data() {return {list: [{ id: 1, name: 'QQ好友', path: '../../static/3.png' },{ id: 2, name: 'QQ微博', path: '../../static/4.png' },{ id: 3, name: '微信好友', path: '../../static/5.png' },{ id: 4, name: '微信朋友圈', path: '../../static/6.png' }]};},methods: {funShare(item) {uni.showToast({title: item.name,icon:"none"});},closePop() {uni.$emit('funDrawer', {type: 1});}}
};
</script><style>
.drawer {width: 750rpx;height: 340rpx;padding: 0 24rpx;box-sizing: border-box;background-color: #fff;position: fixed;left: 0;bottom: 0;border-radius: 30rpx 30rpx 0 0;
}
.drawer-box-title {width: 702rpx;padding-bottom: 40rpx;box-sizing: border-box;margin-top: 50rpx;display: flex;flex-direction: row;text-align: center;justify-content: center;border-bottom: 1px solid #f1f1f1;
}
.drawer-box-title-text {font-size: 32rpx;font-weight: 600;
}
.close {width: 70rpx;height: 70rpx;position: absolute;right: 40rpx;top: 35rpx;
}
.drawer-box {width: 702rpx;margin-top: 50rpx;display: flex;align-items: center;flex-direction: row;
}
.drawer-box-item {width: 175.5rpx;display: flex;align-items: center;justify-content: center;flex-direction: column;
}
.drawer-box-item-img {width: 70rpx;height: 70rpx;
}
.drawer-box-item-text {font-size: 26rpx;font-weight: 500;margin-top: 20rpx;color: #666;
}
</style>

第五步:subnvue.vue

<template><view class="subnvue" :style="{ paddingTop: StatusBar + 13 + 'rpx' }"><view class="subnvue-box"><view class="subnvue-box-left"><img @click="goBack" class="arrow" src="./../../static/1.png" alt="" /></view><view class="subnvue-box-center"><text class="title">课程详情</text></view><view class="subnvue-box-right"><img @click="share" class="share" src="./../../static/2.png" alt="" /></view></view></view>
</template>
<script>
export default {data() {return {StatusBar: getApp().StatusBar};},methods: {share(){uni.$emit('openShare', {type:1});},goBack() {uni.showToast({title: '点击了返回按钮',mask: true,duration: 1500});}}
};
</script><style>
.subnvue {width: 750rpx;background-color: #fff;
}
.subnvue-box {width: 750rpx;height: 88rpx;display: flex;flex-direction: row;padding: 0 24rpx;box-sizing: border-box;
}
.subnvue-box-left {width: 100rpx;height: 88rpx;display: flex;justify-content: center;}
.arrow {width: 21rpx;height: 32rpx;
}
.subnvue-box-center {flex: 1;height: 88rpx;display: flex;align-items: center;justify-content: center;
}
.title {font-size: 32rpx;font-weight: 600;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.subnvue-box-right {width: 100rpx;height: 88rpx;display: flex;flex-direction: row;align-items: center;justify-content: flex-end;}
.share {width: 36rpx;height: 36rpx;
}
</style>

祝:学习愉快、工作顺利

温馨提示:源码获取方式 关注【码农园区】 回复   “ video”   

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/197625.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SQL零基础入门教程,贼拉详细!贼拉简单! 速通数据库期末考!(八)

FULL OUTER JOIN 除了前面讲到的 INNER JOIN&#xff08;内连接&#xff09;、LEFT JOIN&#xff08;左连接&#xff09;、RIGHT JOIN&#xff08;右连接&#xff09;&#xff0c;还有另外一种关联方式&#xff0c;即 FULL OUTER JOIN&#xff08;全外连接&#xff09; FULL O…

Javaweb之Vue指令案例的详细解析

2.3.5 案例 需求&#xff1a; 如上图所示&#xff0c;我们提供好了数据模型&#xff0c;users是数组集合&#xff0c;提供了多个用户信息。然后我们需要将数据以表格的形式&#xff0c;展示到页面上&#xff0c;其中&#xff0c;性别需要转换成中文男女&#xff0c;等级需要…

java游戏制作-拼图游戏

一.制作主界面 首先创建一个Java项目命名为puzzlegame。 再在src中创建一个包&#xff0c;用来制作主界面 代码&#xff1a; 结果&#xff1a; 二.设置界面 代码&#xff1a; 三.初始化界面 代码&#xff1a; 优化代码&#xff1a; 结果&#xff1a; 四.添加图片 先在Java项…

HDFS、MapReduce原理--学习笔记

1.Hadoop框架 1.1框架与Hadoop架构简介 &#xff08;1&#xff09;广义解释 从广义上来说&#xff0c;随着大数据开发技术的快速发展与逐步成熟&#xff0c;在行业里&#xff0c;Hadoop可以泛指为&#xff1a;Hadoop生态圈。 也就是说&#xff0c;Hadoop指的是大数据生态圈整…

机器学习的医疗乳腺癌数据的乳腺癌疾病预测

项目视频讲解:基于机器学习的医疗乳腺癌数据的乳腺癌疾病预测 完整代码数据分享_哔哩哔哩_bilibili 效果演示: 代码: #第一步!导入我们需要的工具 import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns %matplotlib inlin…

Postman实现接口的加密和解密

近期在复习Postman的基础知识&#xff0c;在小破站上跟着百里老师系统复习了一遍&#xff0c;也做了一些笔记&#xff0c;希望可以给大家一点点启发。 1、目前市面上的加密的方式 对称式加密&#xff1a;DES&#xff0c;AES&#xff0c;Base64加密算法 非对称加密&#xff1a…

跟随鼠标的粒子特效分享

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 广告打完,我们进入正题,先看效果: 上代码: html, body {padding: 0;margin: 0;overflow: hidden; }import * as PIXI from https://cdn.skypack.dev/pixi.js@7.2.…

若依启动步骤

1.创建数据库 2.启动redis 3.改后端的数据库连接配置 4.配置redis redis的地址&#xff1a;cmd中ipconfig命令查看 6.启动后端&#xff1a;如下 7.启动前端ruoyi-ui中 先运行npm install&#xff0c;再npm run dev。项目就启动成功了。 用户名&#xff1a;admin 密码&#x…

C#入门(1):程序结构、数据类型

一、C#程序结构 第一个C#程序 using System;namespace base_01 {class Program{#region 代码折叠块static void Main(string[] args){//控制台输出Console.WriteLine("Hello World!");Console.Write("C#是微软的编程语言"); //不换行输出//Console.Rea…

蓝桥杯 map

map 代码示例 #include<iostream> #include<map> using namespace std; int main(){//创建并初始化mapmap<int,string> myMap{{1,"Apple"},{2,"Banana"},{3,"Orange"}} ;//插入元素myMap.insert(make_pair(4,"Grapes&qu…

神经网络常见评价指标AUROC(AUC-ROC)、AUPR(AUC-PR)

神经网络的性能可以通过多个评价指标进行衡量&#xff0c;具体选择哪些指标取决于任务的性质。以下是神经网络中常见的评价指标&#xff1a; 准确性&#xff08;Accuracy&#xff09;&#xff1a; 准确性是最常见的分类任务评价指标&#xff0c;表示模型正确预测的样本数占总样…

资深测试总结,现在软件测试有未来吗?“你“的底气在哪里?

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、为什么会有 “…

3DMAX森林树木植物插件ForestPackLite教程

3DMAX森林树木植物插件ForestPackLite教程 Forest Pack是世界上最受欢迎的散布插件。它提供了一个完整的解决方案来创建大面积的物体&#xff0c;从树木和植物到建筑、人群、骨料、地面覆盖物、岩石等等。如果你能为它建模&#xff0c;森林包就能把它分散开来。 无数工作室依靠…

计算机毕业设计选题推荐-高校后勤报修微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

月子会所信息展示服务预约小程序的作用是什么

传统线下门店经营只依赖自然流量咨询或简单的线上付费推广是比较低效的&#xff0c;属于靠“天”吃饭&#xff0c;如今的年轻人学历水平相对较高&#xff0c;接触的事物或接受的思想也更多更广&#xff0c;加之生活水平提升及互联网带来的长期知识赋能&#xff0c;因此在寻找/咨…

Adversarially Robust Neural Architecture Search for Graph Neural Networks

Adversarially Robust Neural Architecture Search for Graph Neural Networks----《面向图神经网络的对抗鲁棒神经架构搜索》 摘要 图神经网络&#xff08;GNN&#xff09;在关系数据建模方面取得了巨大成功。尽管如此&#xff0c;它们仍然容易受到对抗性攻击&#xff0c;这对…

2023年亚太杯数学建模思路 - 案例:异常检测

文章目录 赛题思路一、简介 -- 关于异常检测异常检测监督学习 二、异常检测算法2. 箱线图分析3. 基于距离/密度4. 基于划分思想 建模资料 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 一、简介 – 关于异常…

10、背景分离 —— 大津算法

上一节学习了通过一些传统计算机视觉算法,比如Canny算法来完成一个图片的边缘检测,从而可以区分出图像的边缘。 今天再看一个视觉中更常见的应用,那就是把图片的前景和背景的分离。 前景和背景 先看看什么是前景什么是背景。 在图像处理和计算机视觉中,"前景"…

HC-SR501传感器制作一个报警系统

接线图&#xff1a; 引脚连接&#xff1a; 1. 将 PIR 信号引脚连接到 arduino 数字 引脚 13。 2. 将 PIR V 引脚连接 到 arduino 5v 引脚。 3. 将 PIR GND 引脚连接到 arduino GND 引脚。 4. 将arduino数字 引脚12连接 到220欧姆电阻&#xff0c;并将该电阻连接到 LED V …

Python开源项目周排行 2023年第38周

#2023年第38周2023年11月19日1easybc用于解析分组加密算法的输入 [EasyDC] 程序&#xff0c;然后根据差分密码分析对分组加密算法进行安全分析。它支持以下功能&#xff1a; EasyBC 的解释器。 基于 SMT 的方法&#xff0c;用于确定各种密码操作的分支数。 S-box 中的差分传播建…