uniapp之自定义顶部样式

当我们在实际项目过程中，有些时候的ui设计图顶部的显示不是原生的样子，这时候就需要自定义了

在page.json页面中需要配置

navigationStyle参数

//需要自定义顶部样式的页面配置
{"path" : "pages/case/index","style" :                                                                                    {"navigationBarTitleText": "案例","navigationStyle": "custom","enablePullDownRefresh": true}
},//默认顶部样式
{"path":"pages/houseVideo/index","style" :{"navigationBarTitleText": "云看房","enablePullDownRefresh": true}
},//两者的区别就是navigationStyle参数

接下来就是自己在需要自定义头部样式的页面自己编写相关css样式即可

涉及到数据就是幸好栏需要的高度和padding值

// 计算自定义头部的高度和paddingcalcCustomPosi() {const systemInfo = uni.getSystemInfoSync(); //获取系统信息同步接口。const menuInfo = uni.getMenuButtonBoundingClientRect(); //let navPadTop = systemInfo.statusBarHeight,navHeight = 0;navHeight = menuInfo.height + (menuInfo.top - navPadTop) + (menuInfo.bottom - menuInfo.height - navPadTop);this.navPadTop = navPadTop + 'px';this.navHeight = navHeight + 'px';}

uniapp之自定义顶部样式相关推荐

uniapp中自定义showToast样式
uniapp中自定义showToast样式使用方式在template中引入在需要使用show-toast的地方使用在main.js中挂在组件文件代码:组件show-toast show-to ...
uniapp中自定义showModal样式
uniapp中自定义showModal样式页面中使用在main.js中引入show-modal组件创建组件show-modal 组件名称show-modal.vue 创建initModal.js ...
uniapp实战项目（仿知识星球App) - - 自定义顶部导航栏和登录弹窗组件
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp自定义顶部导航组件
第一步新建 components/uni-title/uni-title.vue组件  <template><view class=&q ...
uniapp 转H5 实现微信浏览器自定义分享样式
uniapp 转H5后实现微信浏览器自定义分享样式 uniapp 项目转 h5 1.在manifest.json文件中,找到H5配置一下路径,需要注意这个名字需要和布到线上的文件夹名字一致 2.就是 ...
支付宝小程序自定义顶部---uniapp
有一个问题,支付宝小程序的顶部导航栏怎么可以去掉原生的呢? 看到社区回答:在对应页面的json文件中配置 "mp-alipay": {"transparentTitle& ...
UNI-APP在自定义组件中内嵌H5/Html网页，可自定义webview大小，加载不闪屏
问题描述: UNI-APP在自定义组件中内嵌H5/Html网页时,通过内置组件 web-view 实现(如下),发现会自动铺满整个页面,不可控制大小(默认充满屏幕不可控制大小) <web-vie ...
Android自定义顶部栏及侧滑菜单和fragment+viewpag滑动切换的实现
嘿嘿嘿,关于android滑动的操作,是不是经常都会用到呢. 我肯定也要学习一下啦. https://blog.csdn.net/u013184970/article/details/82882107 ...
TabTopUnderLineLayout【自定义顶部选项卡（带下划线）】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言自定义顶部选项卡布局LinearLayout类,实现带下划线样式的效果. 备注:如果配合Fragment的话,MainActivit ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...

uniapp之自定义顶部样式

uniapp之自定义顶部样式相关推荐

最新文章

热门文章