写烂代码（VUE-移动端uniapp）

最近在写一个类似OA的APP！

在写代码调试的过程中发现很多问题。（uni-ui、uview等组件库的问题就不说了，dddd。）

新建页面都有一个"navigationBarTitleText"，感觉很丑，不想要就在pages.json文件里边找到新建页面位置，在"navigationBarTitleText": "待办"， 后边加上 "navigationStyle": "custom"，如下图所示

这样页面顶部的“待办”的textbar就没了，随之而来的问题就出现了。就下图这个玩意。

问题1：当有"navigationBarTitleText": "待办"这个的时候，它是固定不动的，即使页面内有很多列表向上滑动时，列表不会跑到最顶上与手机自带的电量，移动信号图标等重合。而是在即将靠近textbar时就在其下层消失了。但是当我将textbar去掉后，列表向上滑动直接跑到屏幕最上方（MD当你的手机足够长，你的列表可以划10万8千里），与手机自己的图标重叠。然后我就想把"navigationStyle": "custom"代码删掉 "navigationBarTitleText": "待办就出来了，可是删掉以后textbar不显示了，不懂为什么，大神可以帮帮忙吗？我用别的方法解决的。哈哈哈

为了解决上面那个问题就写class呗，我把整个界面分成两个部分，上部分包括（导航栏（插入的块和图标按钮，点击按钮出现popup弹窗）、分段选择器），将上半部分固定。

下半部分为uni-card组成的列表部分也要写一个class,如下

在下半部分的class里position的值要用absolute而不是fixed，用fixed会覆盖上半部分；设置overflow:auto;这样列表项上滑动时就不会跑到页面最上端与手机电量等图标重合。

以上方法就解决了问题1。但是还是想知道为什么 "navigationStyle": "custom"去掉后textbar依旧不显示。

问题二：由于页面布局从上到下依次是导航栏、分段选择器、card列表，当时代码也是这个顺序写的。由此引出上文提到的点击图标按钮弹出popup窗口，理想的弹窗如下图，1为弹窗，2为遮罩层。

实际做出来的弹窗被下方的card列表盖住了，并且没显示遮罩层。当时怀疑card列表是另一个页面写的然后引入当前页面，可能会覆盖在当前页面的占领的区域。问题总是要解决。开始找答案，我看了笨笨的小雪写的一篇文章如下：

就想着我也试一试吧在写代码时把上部分和下部分的顺序换了一下，也就是先写class=lower-half的部分，后写class=upper-harf的部分。运行起来是这样的。

如此这般便实现了。

问题三：由于问题一提到的，原有的textbar消失后，改不回来很麻烦，要将自定义导航栏组件uni-nav-bar代替原来的。但是TMD这个导航栏的字体大小不能改变，各位老爷可得评评理

解决方法来了：在内置浏览器上打开开发者工具，找到工作台这个文本对应的代码及class。

找到以后这么做navbar是自己的class也就是想要的，uni-nav-bar-text是刚才找到的也就是要被替换的class。font-size和font-weight是我们想要的样式。

但是有个很大的问题，uni-nav-bar这个组件是可以设置文本居左居中居右的，居中和居右是可以通过上面方法解决的。但是居左的不可以改变大小！！！！！！因为居中的和居右的都可以在开发者工具里找到他们的class，但是居左的没有class，是style！！！！！！！。这他妈.......

想问一下靓仔们怎么用深度选择器覆盖style样式。

为了解决这个问题我在uni-nav-bar这个插件上加入了block也就是插入插槽，在插槽里写文本。也就是下图

刚接触移动端uniapp一个月叭，还要跟各位多学习！！！吐槽：什么神仙组件呀都是，给✌整不会了。