快捷導(dǎo)航

nvue頁面用法uniapp使用場(chǎng)景

更新時(shí)間：2023年12月11日 10:58:24 作者：Cc_Debugger

Nvue是一個(gè)基于weex改進(jìn)的原生渲染引擎,它在某些方面要比vue更高性能,在app上使用更加流暢,這篇文章主要介紹了nvue頁面用法uniapp,需要的朋友可以參考下

nvue頁面用法uniapp

1.介紹

Nvue是一個(gè)基于weex改進(jìn)的原生渲染引擎，它在某些方面要比vue更高性能，在app上使用更加流暢，但是缺點(diǎn)也很明顯，沒有足夠的api能力，語法限制太大，所以nvue適用于特定場(chǎng)景（需要高性能的區(qū)域長(zhǎng)列表或瀑布流滾動(dòng)等）。

nvue是uni-app App 端內(nèi)置了一個(gè)基于 weex 改進(jìn)的原生渲染引擎，提供了原生渲染能力，與vue在用法上稍有不同，不是使用uniapp開發(fā)app的話，就不要使用nvue

2.使用場(chǎng)景

1.層級(jí)問題

小程序和app-vue中，<map> 組件是由引擎創(chuàng)建的原生組件，它的層級(jí)是最高的，
不能通過 z-index 控制層級(jí)。在<map>上繪制內(nèi)容，可使用組件自帶的marker、controls等屬性，
App端還可以使用plus.nativeObj.view 或 subNVue 繪制原生內(nèi)容，參考。
另外App端nvue文件不存在層級(jí)問題。從微信基礎(chǔ)庫2.8.3開始，支持map組件的同層渲染，不再有層級(jí)問題。

也可以使用cover-view組件。(見文末詳細(xì)介紹)

2.長(zhǎng)列表渲染,，性能問題

app-nvue所有組件均為原生渲染，不存在前端組件無法覆蓋原生組件的問題。但為了保持多端兼容，nvue里也實(shí)現(xiàn)了cover-view，作用與普通view一樣。
在App端，如果重度使用video和map，推薦使用nvue頁面。

3.注意事項(xiàng)

新建得時(shí)候直接新建nvue頁面，不要把vue后綴直接更改nvue，否則可能會(huì)報(bào)錯(cuò)
滿屏不能使用100%，使用flex：1，只支持flex布局
text標(biāo)簽一定要寫成一行
顯示文字，只能使用text標(biāo)簽
給text設(shè)置字體大小或者文字顏色，給每一個(gè)text標(biāo)簽設(shè)置，不能只給text標(biāo)簽的父級(jí)設(shè)置大小和顏色，否則無效
css樣式
只能使用類選擇器，并且不能組合嵌套
只能使用flex布局，默認(rèn)全部容器均為 display: flex; flex-direction: column;
不支持在css里寫背景圖background-image，但可以使用image組件和層級(jí)來實(shí)現(xiàn)類似web中的背景效果。因?yàn)樵_發(fā)本身也沒有web這種背景圖概念。

uniapp的cover-view標(biāo)簽使用

<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">時(shí)間</cover-view>
					<cover-view class="tips-item-num">200h</cover-view>
				</cover-view>
				<cover-view class="tips-item">
					<cover-view class="tips-item-name">長(zhǎng)度</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">數(shù)</cover-view>
					<cover-view class="tips-item-num">100個(gè)</cover-view>
				</cover-view>
			</cover-view>
		</map>

cover-view替代view標(biāo)簽使用

覆蓋在原生組件上的文本視圖。只能包裹文字

app-vue和小程序框架，渲染引擎是webview的。但為了優(yōu)化體驗(yàn)，部分組件如map、video、textarea、canvas通過原生控件實(shí)現(xiàn)，原生組件層級(jí)高于前端組件（類似flash層級(jí)高于div）。為了能正常覆蓋原生組件，設(shè)計(jì)了cover-view。

屬性名 scroll-top
類型 number/string
說明設(shè)置頂部滾動(dòng)偏移量，僅在設(shè)置了 overflow-y: scroll 成為滾動(dòng)元素后生效
平臺(tái)差異說明支付寶小程序不支持

cover-view 嵌套使用時(shí)，內(nèi)部不可直接寫文本節(jié)點(diǎn)，需要使用 cover-view 包裹。
在 video 組件中使用時(shí)，若想在全屏模式下使用cover-view，只有在微信小程序、App端的nvue頁面可實(shí)現(xiàn)。
微信小程序部分原生組件實(shí)現(xiàn)了同層渲染，在指定的基礎(chǔ)庫版本上，某些原生組件可無需使用cover-view覆蓋，
百度小程序iOS端暫不支持一個(gè)頁面有多個(gè)video時(shí)嵌套cover-view
支付寶小程序中 cover-view 不支持嵌套
抖音小程序不需要cover-view，因其原生組件均實(shí)現(xiàn)了同層渲染。
360小程序不存在原生組件，無此概念。

到此這篇關(guān)于nvue頁面用法uniapp的文章就介紹到這了,更多相關(guān)nvue頁面用法uniapp內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: