nvue页面的使用场景
由于nvue页面的没有vue页面写起来没有那么得心应手,所以我只会在一下这几种场景去使用nvue页面。
场景一:
布局有层级冲突问题,比如想要在地图上绘制其他布局,由于地图控件(map)在手机端的层级是最高的,无论你怎么设置z-index都不可能让其他布局覆盖到地图控件之上,这时你就需要nvue来解决这个问题,nvue页面不存在层级问题,所以就随便搞就完事了。
场景二:
需要性能比较强的页面,比如应用的首页以及tabBar切换的那几个页面用nvue,二级页使用vue页面,或者是页面上需要高性能的区域长列表或瀑布流滚动。

nvue页面的使用注意事项
事项一:
nvue页面只支持flex布局,不太会用flex布局的小伙伴得先学习一下了。
事项二:
nvue页面不支持text标签里面且套其他标签,如果你且套了其他标签,在H5端查看是没有问题的,但是运行到手机上就不行了,如果要且套那么父级就使用view标签就对了,这个肯定没问题。
事项三:
如果你发现你的text标签里的内容在手机上不换行显示了,那么你就需要检查一下你是否为text设置了宽度,宽度可以是width:xxrpx,也可以直接设置flex:1让其占满剩余空间。
事项四:
text标签一定要写成一行,要不然你会发现有一个特别宽的空白区域不知道是从哪里来的,下面是示例代码。

正确写法

<text class="text-black-28">{{starLocation.location?starLocation.location:"无"}}</text>

错误写法(切忌不要这样写)

<text class="text-black-28">
	{{starLocation.location?starLocation.location:"无"}}
</text>

事项五:
在写nvue页面时如果你想给text设置字体大小或者文字颜色,那么你需要给每一个text标签设置,不能只给text标签的父级设置大小和颜色,因为你给text标签的父级设置大小和颜色没有一点卵用。
事项六:
如果你要显示文字,那么只能使用text标签,别问为什么照这样写就行了。

Logo

前往低代码交流专区

更多推荐