uni-app vue 3.0 沉浸式状态栏(线性渐变色)
index.vue:
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<button @click="handleClick">沉浸式</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
handleClick: function() {
uni.navigateTo({
url: '/pages/chenjinshi/chenjinshi'
});
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
chenjinshi.vue:
<template>
<div class="page-searchList">
<div class="header">
<div class="statusBar" :style="{height:statusBarHeight+'wx'}"></div><!-- 状态栏占位 -->
<div class="info"><text style="font-size: 16wx;">标题栏</text></div>
</div>
<div class="content">
<text style="font-size: 50wx;">{{statusBarHeight}}wx</text> <!-- 打印状态栏高度 -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
statusBarHeight: ' '
}
},
created() {
let _t = this;
setTimeout(() => { //获取状态栏高度,setTimeout后才能调用uni.
uni.getSystemInfo({
success: function(res) {
_t.statusBarHeight = res.statusBarHeight;
console.log(res);
}
});
}, 1);
}
};
</script>
<style>
.page-searchList {
background-color: #8f8f94;
justify-content: center;
align-items: center;
}
.header {
background-image: linear-gradient(to right, #a80077, #66ff00);
width: 750px;
position: fixed;
top: 0;
}
.info {
height: 44wx;
justify-content: center;
align-items: center;
}
</style>
pages.json:
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
,{
"path" : "pages/chenjinshi/chenjinshi",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}