UNI-APP_nvue踩坑

踩坑1

1.nvue里面的样式不可以用预编译语言,只能用css;

2.不能随心所欲地使用选择器,nvue只支持单类选择器(不可以使用交集选择器和后代选择器,但可以使用并集选择器);

3.div是容器,里面不能直接写字,要在里面写上text

其他:

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

1.关于图片圆角。

因为我做的页面上面有出现用户头像,是圆形的,需要做成图片圆角。看了一些别人的博客,他们说是在"外层的父容器

的样式上加上圆角,然后用overflow来切掉它,让图片变圆"可是我尝试了以后发现并没有成功。

然后,我把关注点从

上挪开,改成在上加上border-radius,就成功了,写成50%和带单位的长度都是有效的!

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的小细节。

我发现给内层的元素设置宽度和高度的时候,用百分比无效,用带单位的数字可以。

相关推荐
2501_915909061 小时前
手机崩溃日志导出的工程化体系,从系统级诊断到应用行为分析的多工具协同方法
android·ios·智能手机·小程序·uni-app·iphone·webview
郑州光合科技余经理2 小时前
技术视角:海外版一站式同城生活服务平台源码解析
java·开发语言·uni-app·php·排序算法·objective-c·生活
wangdaoyin20105 小时前
UniApp中使用LivePlayer进行视频或在流媒体播放
uni-app·liveplayer·h5播放视频
2501_915106325 小时前
App HTTPS 抓包实战解析,从代理调试到真实网络流量观察的完整抓包思路
网络协议·http·ios·小程序·https·uni-app·iphone
游戏开发爱好者86 小时前
苹果App Store应用程序上架方式全面指南
android·小程序·https·uni-app·iphone·webview
2501_916008896 小时前
深入理解 iPhone 文件管理,从沙盒结构到开发调试的多工具协同实践
android·ios·小程序·https·uni-app·iphone·webview
一室易安7 小时前
解决使用 UniApp 搭配 Vue3 小程序开始 使用uview-plus 的返回顶部up-back-top中onPageScroll 不触发的问题
小程序·uni-app
yilan_n7 小时前
鸿蒙应用上传
vue.js·华为·uni-app
yilan_n7 小时前
【UniApp实战】手撸面包屑导航与路由管理 (拒绝页面闪烁)
前端·javascript·vue.js·uni-app·gitcode
一室易安8 小时前
uniapp+vue3 微信小程序中 页面切换tab 页面滚动到指定锚点位置,滚动页面时候到达指定锚点位置吸顶tab 会自动进行切换
微信小程序·uni-app·notepad++