提交 93bc6c51 编写于 作者: M mehaotian

feat: 自定义导航栏增加状态栏设置 ,标题左侧显示

上级 f4f1eafe
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<view class="left-content" @click="back"> <view class="left-content" @click="back">
<text class="uni-icons">{{unicode}}</text> <text class="uni-icons">{{unicode}}</text>
</view> </view>
<view class="uni-navbar-content"> <view class="uni-navbar-content" :class="{'is-left':isLeft}">
<slot>{{title}}</slot> <slot>{{title}}</slot>
</view> </view>
<view class="right-content"> <view class="right-content">
...@@ -23,11 +23,7 @@ ...@@ -23,11 +23,7 @@
type: String, type: String,
default: '' default: ''
}, },
open: { isLeft: {
type: Boolean,
default: false
},
disabled: {
type: Boolean, type: Boolean,
default: false default: false
} }
...@@ -54,11 +50,19 @@ ...@@ -54,11 +50,19 @@
fail(err) { fail(err) {
console.log(err); console.log(err);
}, },
}) })
const sys = uni.getSystemInfoSync() const sys = uni.getSystemInfoSync()
const statusBarHeight = sys.statusBarHeight const statusBarHeight = sys.statusBarHeight
this.statusBarHeight = statusBarHeight this.statusBarHeight = statusBarHeight
},
mounted() {
// TODO 暂时加定时器,否则不生效
setTimeout(() => {
uni.setNavigationBarColor({
frontColor: '#000000',
backgroundColor: '#ffffff'
})
}, 100)
}, },
methods: { methods: {
back() { back() {
...@@ -103,8 +107,12 @@ ...@@ -103,8 +107,12 @@
bottom: 0; bottom: 0;
left: 45px; left: 45px;
right: 45px; right: 45px;
display: flex; display: flex;
flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
}
.is-left {
justify-content: flex-start;
} }
</style> </style>
<template> <template>
<view class="content"> <view class="content">
<uni-navbar-lite :title="title"></uni-navbar-lite> <uni-navbar-lite :title="title" :is-left="isLeft"></uni-navbar-lite>
<scroll-view class="scroll-view" scroll-y="true"> <scroll-view class="scroll-view" scroll-y="true">
<view class="content-item" @click="onClick">
<text>点击标题切换为左侧显示</text>
</view>
<view class="content-item" v-for="item in 100"> <view class="content-item" v-for="item in 100">
<text class="text">内容:{{item+1}}</text> <text class="text">内容:{{item}}</text>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
...@@ -13,11 +16,16 @@ ...@@ -13,11 +16,16 @@
export default { export default {
data() { data() {
return { return {
title: 'Hello uni-app' title: 'Hello uni-app',
isLeft: false
} }
}, },
onLoad() {}, onLoad() { },
methods: {} methods: {
onClick(){
this.isLeft = !this.isLeft
}
}
} }
</script> </script>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册