阿哇
阿哇
  • 发布:2018-10-21 18:38
  • 更新:2019-04-13 23:55
  • 阅读:29753

uni-app nvue沉浸式状态栏(线性渐变色)

分类:uni-app
<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: {  
        statusBarHeight: ''  
    },  
    created() {  
        let _t = this;  
        setTimeout(() => { //获取状态栏高度,setTimeout后才能调用uni.  
            uni.getSystemInfo({  
                success: function(res) {  
                    _t.statusBarHeight = res.statusBarHeight;  
                    console.log(_t.statusBarHeight);  
                }  
            });  
        }, 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>

17 关注 分享
DCloud_heavensoft m***@handsure.com Trust 7***@qq.com 不知 l***@163.com 05309 dawnflyingnow Neil_HL foryou SimpleJalon 2***@qq.com 9***@qq.com 泡泡嘿 sonicsunsky 冷月i 6***@qq.com

要回复文章请先登录注册

阿哇

阿哇 (作者)

回复 1***@qq.com :
这个可以替代titleview
2018-11-16 14:17
DCloud_heavensoft

DCloud_heavensoft

回复 快乐学习生 :
这个是nvue,是weex的语法,这个界面是weex渲染的。uni-app内置了weex
2018-11-12 04:59
快乐学习生

快乐学习生

uniapp不是不能用div吗?
2018-11-11 23:37
1***@qq.com

1***@qq.com

这个有啥用??
2018-11-07 16:41