用uni-app开发自定义微信小程序头部导航

功能更全面的头部可以查看我的新文章 基于uView的头部导航 ：uni-app的自定义头部导航(基于uView 新)_不务正业的小前端的博客-CSDN博客）

由于公司需要，学习了uni-app开发小程序，目前了解不多，主要是以微信小程序为主。

uni-app官网：uni-app官网

微信小程序开发文档：微信开放文档

官方介绍uni-app:

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可编译到iOS、Android、H5、以及各种小程序等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。

一套代码编到7个平台，巴拉巴拉巴拉。。。

个人感受（功能很丰富，bug也很丰富）

接下来我会将在项目中用到的一些我感觉还不错的东西记录一下，以供分享以及自己的积累=。=如有不足，请大佬们指教！！

1.环境介绍

     编译器就用官方的 HBuilderX 编译器, 然后好像没了，创建一个uni-app项目就可以开始撸了。

2.首先要先去除小程序自带的头部导航，在page.json文件里的对应的页面的style配置项里加上：

"style":{"navigationStyle":"custom"
}

就可以开始自定义导航了。

3.为了适配不同型号手机的头部高度，所以要通过（异步）uni.getSystemInfo()或者（同步）uni.getSystemInfoSync()获取顶部状态栏的高度

得到的状态栏高度可以存vuex里。

（增加，获取头部高度，定义在全局）

效果图如下：

已适配大部分机型，具体尺寸可以根据需求自行调整。。

（还有不足之处，慢慢完善吧o(∩_∩)o 哈哈）

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！