nvue页面用法uniapp使用场景

 更新时间:2023年12月11日 10:58:24   作者:Cc_Debugger  
Nvue是一个基于weex改进的原生渲染引擎,它在某些方面要比vue更高性能,在app上使用更加流畅,这篇文章主要介绍了nvue页面用法uniapp,需要的朋友可以参考下

nvue页面用法uniapp

1.介绍

Nvue是一个基于weex改进的原生渲染引擎,它在某些方面要比vue更高性能,在app上使用更加流畅,但是缺点也很明显,没有足够的api能力,语法限制太大,所以nvue适用于特定场景(需要高性能的区域长列表或瀑布流滚动等)。

nvue是uni-app App 端内置了一个基于 weex 改进的原生渲染引擎,提供了原生渲染能力,与vue在用法上稍有不同,不是使用uniapp开发app的话,就不要使用nvue

2.使用场景

1.层级问题

小程序和app-vue中,<map> 组件是由引擎创建的原生组件,它的层级是最高的,
不能通过 z-index 控制层级。在<map>上绘制内容,可使用组件自带的marker、controls等属性,
App端还可以使用plus.nativeObj.view 或 subNVue 绘制原生内容,参考。
另外App端nvue文件不存在层级问题。从微信基础库2.8.3开始,支持map组件的同层渲染,不再有层级问题。

也可以使用cover-view组件。(见文末详细介绍)

2.长列表渲染,,性能问题

app-nvue所有组件均为原生渲染,不存在前端组件无法覆盖原生组件的问题。但为了保持多端兼容,nvue里也实现了cover-view,作用与普通view一样。
在App端,如果重度使用video和map,推荐使用nvue页面。

3.注意事项

新建得时候直接新建nvue页面,不要把vue后缀直接更改nvue,否则可能会报错
满屏不能使用100%,使用flex:1,只支持flex布局
text标签一定要写成一行
显示文字,只能使用text标签
给text设置字体大小或者文字颜色,给每一个text标签设置,不能只给text标签的父级设置大小和颜色,否则无效
css样式
只能使用类选择器,并且不能组合嵌套
只能使用flex布局,默认全部容器均为 display: flex; flex-direction: column;
不支持在css里写背景图background-image,但可以使用image组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念。

uniapp的cover-view标签使用

<map
			style="width: 100%; height: 65%"
			:latitude="latitude"
			:longitude="longitude"
			:markers="covers"
			:scale="18"
		>
			<cover-view class="tips">
				<cover-view class="tips-item">
					<cover-view class="tips-item-name">时间</cover-view>
					<cover-view class="tips-item-num">200h</cover-view>
				</cover-view>
				<cover-view class="tips-item">
					<cover-view class="tips-item-name">长度</cover-view>
					<cover-view class="tips-item-num">100m</cover-view>
				</cover-view>
				<cover-view class="tips-item">
					<cover-view class="tips-item-name">海拔</cover-view>
					<cover-view class="tips-item-num">100m</cover-view>
				</cover-view>
				<cover-view class="tips-item">
					<cover-view class="tips-item-name">数</cover-view>
					<cover-view class="tips-item-num">100个</cover-view>
				</cover-view>
			</cover-view>
		</map>

cover-view替代view标签使用

覆盖在原生组件上的文本视图。只能包裹文字

app-vue和小程序框架,渲染引擎是webview的。但为了优化体验,部分组件如map、video、textarea、canvas通过原生控件实现,原生组件层级高于前端组件(类似flash层级高于div)。为了能正常覆盖原生组件,设计了cover-view。

属性名 scroll-top
类型 number/string
说明 设置顶部滚动偏移量,仅在设置了 overflow-y: scroll 成为滚动元素后生效
平台差异说明 支付宝小程序不支持

cover-view 嵌套使用时,内部不可直接写文本节点,需要使用 cover-view 包裹。
在 video 组件中使用时,若想在全屏模式下使用cover-view,只有在微信小程序、App端的nvue页面可实现。
微信小程序部分原生组件实现了同层渲染,在指定的基础库版本上,某些原生组件可无需使用cover-view覆盖,
百度小程序iOS端暂不支持一个页面有多个video时嵌套cover-view
支付宝小程序中 cover-view 不支持嵌套
抖音小程序不需要cover-view,因其原生组件均实现了同层渲染。
360小程序不存在原生组件,无此概念。

到此这篇关于nvue页面用法uniapp的文章就介绍到这了,更多相关nvue页面用法uniapp内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue如何实现点击选中取消切换

    vue如何实现点击选中取消切换

    这篇文章主要介绍了vue实现点击选中取消切换,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • element ui组件中element.style怎么改详解

    element ui组件中element.style怎么改详解

    element.style是一种内联样式,一般都是代码里写死的,下面这篇文章主要给大家介绍了关于element ui组件中element.style怎么改的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • vue点击按钮动态创建与删除组件功能

    vue点击按钮动态创建与删除组件功能

    这篇文章主要介绍了vue点击按钮动态创建与删除组件功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • Vuex中mutations的用法及说明

    Vuex中mutations的用法及说明

    这篇文章主要介绍了Vuex中mutations的用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Vue浅拷贝和深拷贝实现方案

    Vue浅拷贝和深拷贝实现方案

    在理解浅拷贝和深拷贝浅前,必须先理解基本数据类型和引用数据类型的区别,这篇文章主要介绍了Vue浅拷贝和深拷贝实现方案及区别对比分析,需要的朋友可以参考下
    2023-03-03
  • 使用vue制作探探滑动堆叠组件的实例代码

    使用vue制作探探滑动堆叠组件的实例代码

    探探的堆叠滑动组件起到了关键的作用,下面就来看看如何用vue写一个探探的堆叠组件,感兴趣的朋友一起看看吧
    2018-03-03
  • 利用vue组件自定义v-model实现一个Tab组件方法示例

    利用vue组件自定义v-model实现一个Tab组件方法示例

    这篇文章主要给大家介绍了关于利用vue组件自定义v-model实现一个Tab组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-12-12
  • Element的Pagination分页sync问题小结

    Element的Pagination分页sync问题小结

    本文主要介绍了Element的Pagination分页sync问题小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • vue.js中for循环如何实现异步方法同步执行

    vue.js中for循环如何实现异步方法同步执行

    这篇文章主要介绍了vue.js中for循环如何实现异步方法同步执行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • Vue2与Vue3如何利用install自定义全局确认框组件编写

    Vue2与Vue3如何利用install自定义全局确认框组件编写

    这篇文章主要介绍了Vue2与Vue3如何利用install自定义全局确认框组件编写方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论