uniapp 内使用 nvue 做原生标题

本贴最后更新于 1773 天前,其中的信息可能已经沧海桑田

nvue 页面只能使用 vue 的生命周期,uniapp 生命周期 api 支持部分,css 样式只支持 flex,很多 css 样式不支持

<template>
	<div class="controls-top" ref="controlsTop">
		<div class="title"><text class="text">{{title}}</text></div>
		<div class="fanhui" @tap="back"><text class="ios-icon">&#xe60a;</text></div>
		<div class="top-right1">
			<div class="power-view">
				<div class="power-box">
					<div class="power-header"></div>
					<div class="power-body"><div class="power-level" :style="{ width: `${16 * level}px`, backgroundColor: '#fff' }"></div></div>
				</div>
			</div>
		</div>
		<div class="top-right2">
			<text class="ios-sm-title">{{nowTime}}</text>
		</div>
	</div>
</template>

<script>
const animation = weex.requireModule('animation');
const modal = weex.requireModule('modal');
export default {
	data() {
		return {
			level:0,
			nowTime:"00:00",
			title:'',
			timer:null,
			platform:null
		}
	},
	beforeCreate() {
		// #ifdef APP-PLUS-NVUE
		var domModule = weex.requireModule('dom');
		domModule.addRule('fontFace', {
			fontFamily: 'texticons',
			src: "url('../../../static/text-icon.ttf')"
		});
		// #endif
	},
	created(){
		uni.getSystemInfo({
			success: (e) => {
				// #ifndef MP
				this.platform = e.platform
				// #endif
			}
		})
	},
	mounted() {
		this.getLevel()
		this.timer = setInterval(()=>{
			this.nowTime = this.getNowTime()
		},1000)
		uni.$on("videoTitileShow",()=>{
			this.nowTime = this.getNowTime()
			this.animateControls(0,this.$refs.controlsTop)
		})
		uni.$on("videoTitileHide",()=>{
			this.animateControls(-40,this.$refs.controlsTop)
		})
		uni.$on("videoTitileChange",(title)=>{
			this.title = title
		})
	},
	destroyed() {
		uni.$off("videoTitileShow")
		uni.$off("videoTitileHide")
		uni.$off("videoTitileChange")
		clearInterval(this.timer)
	},
	methods: {
		getLevel(){
			let promise = new Promise((resolve,reject)=>{
				//#ifdef APP-PLUS-NVUE
				if(this.platform == 'android'){
					//注意,安卓需要配置下manifest.json文件,打开后,进入模块权限配置,在右侧的Android权限设置里勾选上android.permission.BATTERY_STATS
					var main = plus.android.runtimeMainActivity();  
					var Intent = plus.android.importClass('android.content.Intent');  
					var recevier = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {  
					        onReceive: function(context, intent) {  
					        var action = intent.getAction();  
					        if (action == Intent.ACTION_BATTERY_CHANGED) {  
					            let level   = intent.getIntExtra("level", 0); //电量  
					            var voltage = intent.getIntExtra("voltage", 0); //电池电压  
					            var temperature = intent.getIntExtra("temperature", 0); //电池温度  
								resolve(level/100)
					        }  
					     }  
					 });  
					var IntentFilter = plus.android.importClass('android.content.IntentFilter');  
					var filter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);  
					main.registerReceiver(recevier, filter);
				}else if(this.platform == 'ios'){
					var UIDevice = plus.ios.import("UIDevice");
					var dev = UIDevice.currentDevice();  
					if (!dev.isBatteryMonitoringEnabled()) {  
					    dev.setBatteryMonitoringEnabled(true);  
					}  
					let level =dev.batteryLevel();  
					
					resolve(level)
				}
				//#endif
				//#ifdef MP-WEIXIN
				wx.getBatteryInfo({
					success: function(e) {
						resolve(e.level)
					}
				})
				//#endif
			})
			promise.then(res=>{
				this.level = res
			})
		},
		getNowTime(){
			var now = new Date();
			var hh = now.getHours();            //时
			if(hh<10) hh = "0" + hh;
			var mm = now.getMinutes();          //分
			if(mm<10) mm = "0" + mm;  
			return `${hh}:${mm}`; 
		},
		back(){
			this.animateControls(-40,this.$refs.controlsTop)
			uni.$emit("exitFullscreen")
		},
		animateControls(distance,el){
			animation.transition(el, {
				styles: {
					transform: `translate(0px, ${distance}px)`,
				},
				duration: 350, //ms
				timingFunction: 'ease',
				delay: 0 //ms
				}, () => {
					
				}
			)
		}
	}
};
</script>

<style>
.controls-top {
	/* width: 750upx; */
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	position: relative;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
	height: 40px;
	transform: translateY(-40px);
	align-items: center;
	justify-content: space-between;
	text-align: left;
	padding: 0 40px 0 40px;
}
.ios-icon {
	font-size: 18px;
	color: #fff;
	font-family: texticons;
}
.title {
	/* width: 750upx; */
	height: 40px;
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	position: absolute;
	left: 40px;
	right: 80px;
	top: 0px;
	justify-content: center;
	text-align: left;
	align-items: flex-start;
	/* background-color: #007aff; */
	padding: 0 10px 0 10px;
}
.text {
	color: #fff;
	font-size: 14px;
}
.fanhui {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	left: 0;
	justify-content: center;
	align-items: center;
}
.top-right1 {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	align-items: center;
	font-size: 12px;
	color: #fff;
	position: absolute;
	top: 14px;
	right: 2px;
	width: 40px;
}
.top-right2 {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	align-items: center;
	font-size: 12px;
	color: #fff;
	position: absolute;
	top: 12px;
	right:38px;
	width: 40px;
}
.power-view {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	align-items: center;
}
.power-box {
	flex-direction: row;
	align-items: center;
}
.power-header {
	height: 4px;
	width: 2px;
	background-color: #fff;
}
.power-body {
	height: 9px;
	width: 20px;
	border-width: 1px;
	border-color: #fff;
	padding: 1px;
	flex-direction: row;
	justify-content: flex-end;
}
.power-level {
	height: 5px;
}
.ios-sm-title{
	font-size: 10px;
	color: #fff;
}
</style>

image.png

pages.josn 配置 nvue
image.png

vue 页面里获取 nvue 组件,使用

this.videoTitleNvue = uni.getSubNVueById('title');
this.videoTitleNvue.setStyle({
	top: 44 + uni.getSystemInfoSync().statusBarHeight + 'px',
	left: '0px',
	width: '100%',
	height: '40px'
});
this.videoTitleNvue.show('auto', 0, function() {
	// 打开后进行一些操作...
	//
});

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
gjTool
欢迎博客互链 https://www.gjtool.cn/ 武汉

推荐标签 标签

  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 51 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖 • 1 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    408 引用 • 3574 回帖
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 2 关注
  • abitmean

    有点意思就行了

    29 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖 • 2 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    85 引用 • 139 回帖 • 1 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 488 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 6 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 47 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 510 关注
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 700 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    75 引用 • 1737 回帖 • 5 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1705 回帖 • 1 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 73 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    29 引用 • 66 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 670 关注
  • 导航

    各种网址链接、内容导航。

    40 引用 • 173 回帖
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 2 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 4 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 595 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 1 关注