YouRanSNS 主打 DIY 化，可能大家很疑惑，为什么顶部的导航栏与尾部的主导航确不能 DIY 化，甚至没有很多的配置，实际上这是源于顶部的导航栏与尾部的主导航是用的 uniapp 原生导航，本身 uniapp 又没有给这两个导航太多的配置选项。

可以自定义吗？

可以的，通过技术，是可以把顶部的导航与尾部的导航自定义，为什么我们没有这样做？

其实还是效率问题，uniapp 原生的顶部导航与尾部导航是原生渲染，在 App 端也是原生渲染，而自定义的，虽然样式、功能可扩展，但是执行效率上是不如原生导航的，所以这里，我们并没有进行封装自定义。

以下是引用 uniapp 官方的话：

取消原生导航栏后，自己使用HTML自定义组件模拟导航栏，会有很多性能体验问题：

加载不如原生导航快

下拉刷新无法从自定义的导航栏组件下面下拉。除非使用前端做下拉刷新，但性能不如自带的原生下拉刷新。

必须取消页面的bounce效果，否则滚动到顶时再拖屏幕，在iOS上发现title也被拖下来了。

滚动条会通顶

所以除非不得以，不要取消原生导航栏。

如必须使用，注意如下几点：

涉及到导航栏高度的css尽量放置在App.vue里面以提高渲染速度（css渲染顺序：先渲染App.vue里面的css，再渲染页面css）

如果是深色造成闪屏，需要在pages.json的titleNView下配置webview的背景色

状态栏颜色应设置默认颜色，若非必要，不建议修改其颜色

减少在组件中使用 :style="" 的使用以提高性能

下拉刷新使用circle方式，并设置offset，让下拉刷新的圈从指定位置开始下拉，具体见pages.json配置文档

有个高频场景是App“首页”的title自定义，如果实现的效果很个性化，那么使用plus.nativeObj.view的方案会过于复杂，由于首页并不存在新页面进入立即渲染的压力，所以App首页如果要大幅定制，推荐使用前端view绘制，而不是使用plus.nativeObj.view。

如果把自定义导航封装成组件，虽然多个页面引入方便，但性能下降，因为这种自定义组件的加载是晚于页面基本元素的，会导致新页面进入动画时无法渲染title。

所以导航条这种要求在动画期渲染的东西，尽量不要使用自定义组件方式。