vue项目5+app项目实现顶部状态栏

参考文档 http://www.html5plus.org/doc/h5p.html#

app.vue获取状态栏高度

<template>
<div id="app" class="app" :class="{'has-nav-footer':$route.meta.navFooterShow}">
<transition :name="transitionName">
<keep-alive :include="keepAliveInclude">
<router-view class="router-view" />
</keep-alive>
</transition>
<!-- 底部导航 -->
<!-- <transition name='slide'> -->
<nav-footer v-show="$route.meta.navFooterShow" />
<!-- </transition> -->
</div>
</template>
<script>
import NavFooter from "@components/NavFooter";
export default {
name: 'App',
components: {
NavFooter
},
data() {
return {
transitionName: '',
keepAliveInclude: ["home", "exercises", "course", "mine"],
statusBarHeight:0,
isImmersedStatusbar:false,
}
},
created() {
let _this = this;
// 只有5+APP 才会执行这段代码
document.addEventListener("plusready", function() {
plus.navigator.setStatusBarStyle('dark');//状态栏文字颜色全局默认为黑色，如需单独设置复制进独立的vue页面中
_this.statusBarHeight = Number.isFinite(plus.navigator.getStatusbarHeight()) ? plus.navigator.getStatusbarHeight() : 28;//状态栏高度,判断是否是数字，不是使用默认高度28
_this.isImmersedStatusbar = plus.navigator.isImmersedStatusbar();//是否为沉浸式
_this.addStyleElement();
}, false);
},
methods: {
//存储手机状态栏高度;
getStatusBarHeight() {
if (this.isImmersedStatusbar) {
this.$store.commit('setStatusBarHeight', this.statusBarHeight)
return this.statusBarHeight;
} else {
let statusBarHeight = 0;
this.$store.commit('setStatusBarHeight', statusBarHeight)
return statusBarHeight;
}
},
//添加样式
addStyleElement() {
let statusBarHeight = this.getStatusBarHeight();
let head = document.head || document.getElementsByTagName('head')[0];
let styleElement = document.createElement('style');
let css =
`.page-header{padding-top:${statusBarHeight}px}.page-header .status-bar{height:${statusBarHeight}px}.page-header+.page-body{border-top:${statusBarHeight}px solid transparent}}`;
styleElement.type = 'text/css';
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = css;
} else {
styleElement.appendChild(document.createTextNode(css))
}
head.appendChild(styleElement);
}
},
watch: {
'$route'(toPage, fromPage) {
let toPageRouteLevel = toPage.meta.routeLevel;
let fromPageRouteLevel = fromPage.meta.routeLevel;
if (toPageRouteLevel == fromPageRouteLevel || fromPage.fullPath == '/') {
//路由层级相同,或者是首次加载;
this.transitionName = '';
} else {
this.transitionName = toPageRouteLevel > fromPageRouteLevel ? 'slideLeft' : 'slideRight'
}
}
}
}
</script>
<style lang="less">
@import './assets/css/common.less';
</style>
<style lang="less" scoped>
.app {
height: 100%;
position: relative;
.router-view {
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
right: 0;
&.slideRight-leave-to,
&.slideLeft-enter {
transform: translateX(100%);
}
&.slideRight-enter-active,
&.slideRight-leave-active,
&.slideLeft-enter-active,
&.slideLeft-leave-active {
transition: transform .3s ease-out;
}
&.slideRight-enter,
&.slideLeft-leave-to {
transform: translateX(-100%);
}
}
.nav-footer-c {
&.slide-enter,
&.slide-leave-to {
transform: translateX(-100%);
}
&.slide-enter-active,
&.slide-leave-active {
transition: transform .3s ease-out;
}
&.slide-enter-to,
&.slide-leave {
transform: translateX(0);
}
}
&.has-nav-footer {
.router-view {
height: calc(100% - 98px);
}
}
}
</style>

每个页面按照固定结构

<template>
<div class="home">
<div class="page-header van-nav-bar--box">
<div class="status-bar"></div>
<van-nav-bar>
<div class="nav-bar__title toe" slot="title">首页</div>
</van-nav-bar>
</div>
<div class="page-body">
<div class="page-body-inner ">
//页面内容
<van-button type="primary" @click="btn" block>预览图片，并保存到系统相册</van-button>
<van-button type="primary" @click="btn2" block>弹出系统日期选择对话框</van-button>
<van-button type="primary" @click="btn3" block>弹出系统时间选择对话框</van-button>
<van-button type="primary" @click="btn4" block>弹出系统确认对话框</van-button>
<van-button type="primary" @click="btn5" block>清除缓存111</van-button>
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {}
},
mounted() {
localStorage.setItem('first_falg', true)
},
methods: {
btn() {
let _this = this;
plus.nativeUI.previewImage([
"http://www.qc888.info/uploads/share/QJESUK.png",
"http://img-cdn-qiniu.dcloud.net.cn/newpage/images/logo4.png"
], {
current: 0,
loop: true,
onLongPress: function(e) { // 预览界面长按显示ActionSheet
let url = e.url;
console.log('url: ' + e.url);
let bts = [{
title: "保存"
}];
plus.nativeUI.actionSheet({
title: "保存图片",
cancel: "取消",
buttons: bts
},
function(e) {
if (e.index == 1) {
let dtask = plus.downloader.createDownload(url, {}, function(d, status) {
if (status == 200) {
//下载完成：d.filename，保存文件到系统相册中
plus.gallery.save(d.filename, function() {
plus.nativeUI.toast('图片已保存');
});
} else {
console.log("失败: " + status);
}
});
dtask.start(); //开始下载
} else {
//取消
}
}
);
}
});
},
btn2(){
var styles = {};
styles.title = "请选择日期："; // 显示标题
plus.nativeUI.pickDate(function(e){
var d=e.date;
console.log( "选择的日期："+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate() );
}, function(e){
console.log( "未选择日期："+e.message );
}, styles);
},
btn3(){
plus.nativeUI.pickTime(function(e){
var d=e.date;
console.log("选择的时间："+d.getHours()+":"+d.getMinutes());
}, function(e){
console.log("未选择时间："+JSON.stringify(e));
});
},
btn4(){
plus.nativeUI.confirm("内容", function(e){
console.log((e.index==0 ? "确认" : "取消") + e.index);
},
{"title":"标题",
"buttons":["确认","取消"],
"verticalAlign":"center"
}
);
},
btn5(){
localStorage.clear()
},
},
}
</script>
<style scoped lang="less">
.home {
/deep/.page-header {
.status-bar {
background: #0294FF;
}
}
/deep/.page-body {
.page-body-inner {
button{
margin-top: 20px;
}
}
}
}
</style>

最后

以上就是高挑可乐为你收集整理的vue项目5+app项目实现顶部状态栏的全部内容，希望文章能够帮你解决vue项目5+app项目实现顶部状态栏所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。