标签：flex nvue show 导图 元素 bottom SEO border
踩坑1
————————————————
版权声明：本文为CSDN博主「努力学前端的南宫」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sfyjknvcx/article/details/107563753
最近我在用uni-app做一个app，涉及到了类似抖音的那种播放视频。我在网上找了个别人讲解相关内容的博客，用.vue的文件照着敲下来，在小程序上可以运行，美滋滋。结果放到app上真机调试就翻车了，只能看到一整个视频。我本来准备放在视频上面的东西全被盖住了，所以选择用nvue进行重构。这是我第一次使用nvue，感觉特别艰辛。
我翻了uni-app官网的文档，weex的文档，还有一些别人的博客，好不容易把页面倒腾成了能看的样子，现在给大家分享一些我在过程中学到的知识和我自己的发现。
首先，零零散散看到了一些文档和别人博客给的提示，这里我简单地总结下：1.nvue里面的样式不可以用预编译语言，只能用css；2.不能随心所欲地使用选择器，nvue只支持单类选择器（不可以使用交集选择器和后代选择器，但可以使用并集选择器）；3.div是容器，里面不能直接写字，要在里面写上
以下是我自己的偶然发现：
1.nvue支持行高line-height，但是不支持纯数字的行高（表示行高是字体大小的多少倍），只支持带单位的长度。（我就特别喜欢用数字做为行高，结果打开页面我一脸懵逼，文字只能看见一条线，改成具体的高度后就正常了）
2.nvue不支持box-sizing的设置。（我之前很喜欢用padding撑开距离，因为box-siziing默认是content-box，用padding可以撑开距离，结果nvue的box-siziing是border-box而且无法修改，给图片加上padding会让图片变形）
3.nvue里的fixed定位的元素不受z-index的影响，层级完全由先来后到决定，写在后面的元素层级永远比写在前面的高。
4.nvue里，如果需要用bottom来定位，怎么办？我知道定位的四个偏移量里，top优先级高于bottom，left高于right。在浏览器中，只想用bottom来定位，不想用top，直接用bottom没问题，在nvue里我就碰壁了。解决方法是：先把优先级高的top“解决掉”，才能用bottom——在样式里，写上top:auto;然后对bottom的设置才会生效。left和right也是同理。
5.nvue要怎么控制文字的换行？CSS里有white-space控制换行，然而nvue不支持。如果想让文字不换行，可以设置lines属性为1（默认为0表示没有限制多少行）
6.uni-app的为vue文件提供了更多的生命周期，nvue文件却没有。比如onLoad就没有，如果要做初始化的工作，可以写在mounted生命周期钩子里去。
踩坑2
https://blog.csdn.net/sfyjknvcx/article/details/107631262
小透明继续写一个。继上次的探索之后又遇到了一些问题，我来再说两句吧，希望能给同样遇到问题的朋友一点启发。
1.关于图片圆角。
因为我做的页面上面有出现用户头像，是圆形的，需要做成图片圆角。看了一些别人的博客，他们说是在“外层的父容器
然后，我把关注点从
上挪开，改成在2.关于显示隐藏。
nvue必须用flex布局，我认为原因是它里面的display值为flex，而且不可以改成标准流的block等，也就是不支持修改display。
v-show的显示隐藏就是靠display:none；和 display: block;很显然v-show在nvue里会失效。而v-if是把整个元素删掉和插入了，是可以做到显示隐藏的，但是我认为对于弹窗来说，需要频繁切换显示隐藏，v-if用在这里不合适。所以，必须找一个不借助display:none;的隐藏方法，而且隐藏后不能占空间（不能被误点到），也不能频繁插入和删除元素。
所以不能用插入删除元素的v-if,不能用作为障眼法的transform: scale(0),opacity: 0;也不可能用仍然占空间的visibility:hidden;（我试用了下，发现在nvue里这个没有生效）。我想到了用宽度或高度为0的办法。
具体来说，对于宽度固定的元素，如蒙板是全屏的，宽度肯定是750rpx，或者某个弹窗高度不确定，但宽度为500rpx，这个时候可以给默认样式写成width:0;然后根据条件判断，要显示的时候加上另一个叫“show”的calss，在“show”里面写上正常的宽度。这样，这个元素一直存在于页面，是否可见完全取决于有没有加上show这个class。
反之，有的元素高度是固定的，或者和后面的元素上下相连，不希望隐藏的时候保留高度，就可以做成默认height:0;，在“show”的class里写上具体的高度。
如果不给widh和height设置固定的宽度和高度，则它们的实际大小是由内容撑大的。但是很遗憾，我发现给“show”里面设置width或height为auto；并没有效果。所以只能退而求其次，在确定是固定的大小的那一方进行这样切换。如果width和height都设为0，还能看见元素的一小部分，那不是因为有的东西无法隐藏，而是因为padding撑起了这一小块的空间。
3.一个小细节。
我想让点击内层元素，事件不冒泡，但又暂时不知道内层元素点击了要做些什么事情，就写成了@tap.stop，后面没有绑定事件函数，我记得这样也是可以的。结果出现了非常莫名其妙的错误，value.trim is not a function。我根本就没有写到trim。百度了一堆，错误原因五花八门，我通过排除法才找到这里的。问题应该是我没有绑定函数，我最后是绑定了一个空函数到这里。
4.关于flex的小细节。
我发现给内层的元素设置宽度和高度的时候，用百分比无效，用带单位的数字可以。给
更多nvue经验
https://www.cnblogs.com/hl1223/p/10384307.html
踩坑经验
https://blog.csdn.net/csdn_yuan_/article/details/107429592
关于nvue，我想出一个思维导图，最后会附在这个文章里，可能要先研究weex
weex文档
https://weex.apache.org/zh/docs/api/weex-variable.html
标签：flex,nvue,show,导图,元素,bottom,SEO,border 来源： https://www.cnblogs.com/cn-oldboy/p/14770733.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。