uniapp头部标题栏初步方案

整体app采用沉浸式顶部

1、对于需要全屏的页面，开启自定义标题栏

 //pages.json"pages": [ {"path": "pages/index/index","style": {"navigationStyle":"custom" //开启自定义标题}},]

2、对于正常标题，正常配置

// pages.json
{"path": "pages/news/index","style": {"navigationBarTitleText": "快讯"}},

3、app自定义头部右边内容

//
{"path": "pages/home/mem-detail","style": {"navigationBarTitleText": "会员详情","app-plus": {"titleNView": {"buttons": [ //原生标题栏按钮配置,{"text": "保存", //"color":"#0072FF","fontSize":"14px","width":"40px"}]} //禁用原生导航栏}}},

4、对于右边有图标的标题，采用自定义标题

- pages.json配置自定义标题- 页面里可以使用uview的标题组件- 自定义页面默认是沉浸式，需要一个盒子来撑起状态栏的高度```js{"path": "pages/index/index","style": {"navigationStyle":"custom" //开启自定义标题}},<template><view><!-- #ifdef APP-PLUS -->  <view class="status_bar">  <view class="top_view"></view>  </view>  <!-- #endif --> <view>  //自定义标题</view> </view>
</template>
//顶部模拟状态栏的样式
//--status-bar-height是状态栏高度变量
<style>
.status_bar {  height: var(--status-bar-height);  width: 100%;  background-color: #F8F8F8;
}
.top_view {  height: var(--status-bar-height);  width: 100%;  position: fixed;  background-color: #F8F8F8;  top: 0;  z-index: 999;
}
</style>

5、透明原生头部，只需要一个返回和标题

     {"path": "pages/home/detail","style": {"navigationBarTitleText": "","app-plus": {"titleNView": {"type": "transparent","backgroundColor": "rgba(255,255,255,0)"}}}},

6、兼容app和小程序的状态栏高度

var(–status-bar-height) 此变量在微信小程序环境为固定 25px，在 App 里为手机实际状态栏高度，导致小程序高度不合适
统一动态获取状态栏高度

         // app.vue中动态获取状态栏高度，存入vuexconst height = uni.getSystemInfoSync().statusBarHeightthis.$store.commit('getHeight',height)// vuexstate: {userInfo: uni.getStorageSync('userInfo') || {},token: uni.getStorageSync('token') || '',city: uni.getStorageSync('city') || '郑州市',history: uni.getStorageSync('history') || [],url: uni.getStorageSync('url') || 'https://ddcity.brt999.com/h5/#/',height: uni.getStorageSync('height') || 30,},mutations: {getHeight(state, height) {state.height = heightuni.setStorageSync('height', state.height)},}//自定义头部的页面使用<view class="status_bar" :style="{backgroundColor: '#FFC600',height:height+'px'}"></view>import {mapState} from 'vuex'computed:{...mapState(['height'])},

uniapp头部标题栏初步方案相关推荐

小程序中自定义头部标题栏
小程序最开始只能全局定义头部标题栏,也就是说一旦你想某个页面自定义头部标题栏,那么所有的页面都需要重新定义(也就是所有页面都需要重写头部标题栏): 但现在新版本的微信已经开放了可以单页面自定义头部标题 ...
uni-app 原生标题栏搜索输入框事件合集
"pages": [{"path": "pages/index/index","style": {"navig ...
小程序篇 - uni-app自定义标题栏样式适配问题
我们自定义标题栏先要设置 navigationStyle: 'custom' 设置过后只会保留胶囊其他的可以自由发挥咯 json "pages": [{"path&qu ...
uni-app 头部导航条改为背景图
将某一页面的导航条,改为背景图 1.在pages.json文件中将要修改的页面,style中的"navigationStyle"设置为custom,取消默认的原生导航栏 ,{&qu ...
【Deepin 20 Beta系统】解决Chrome浏览器头部标题栏太宽
一.问题 Deepin 20 beta 中自带Chrome浏览器,默认标题栏高度很高,加上输入框和书签宽度,整个浏览信息区域占比少得可怜,以下方法解决. 标题栏默认高度图二.解决办法参考:Wind ...
Uni-App 简单引导页示例
Uni-App 简单引导页示例第一步:建3个页面文件.在pages目录下,新建index/init.vue.index/guide.vue.index/home.vue pages.json: {{ ...
【微信小程序】小程序之自定义头部导航栏背景图
一般的导航栏都是微信自定义生成的,但是有的项目项目当中感觉头部样式太过单调,不怎么好看.就设计了不要小程序头部标题栏的页面,为此找了好多方法都没有解决.最终还是让我给找到了一个解决的方法.就是在jso ...
uni-app+iconfont 实现星级评分（vue）
效果图需求点击星星进行评分,若评分低于三星,则展示问题原因,星级评分多少则高亮几颗星,所有选项均为必选项,评分完成后可提交表单,并把问题.星级分数.原因传给后台. 因需求原因先做了星星组件的 ...
uniapp自定义弹窗时去掉title栏
前言:最近在项目中有这么一个需求,当点击页面中某一个元素时,调起弹窗显示相应的组件并且隐藏掉title栏,点击组件中的关闭图标时,弹窗销毁并显示相应的title栏.找了一下发现好多都不太对,于是记录下 ...

uniapp头部标题栏初步方案

整体app采用沉浸式顶部

1、对于需要全屏的页面，开启自定义标题栏

2、对于正常标题，正常配置

3、app自定义头部右边内容

4、对于右边有图标的标题，采用自定义标题

5、透明原生头部，只需要一个返回和标题

6、兼容app和小程序的状态栏高度

uniapp头部标题栏初步方案相关推荐

最新文章

热门文章