1. 程式人生 > >小程式導航元件navigator活學活用

小程式導航元件navigator活學活用

小程式開發中必不可少的元件navigator,雖然使用頻率非常高,但是卻沒多少人能靈活運用。 先說navigator元件的用處: 它的主要用處是跳轉執行,跳轉可分為當前頁面內跳轉、前往頁面外部的跳轉。 其中,在官方文件中有明確示例:

<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳轉到新頁面</navigator>
  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在當前頁開啟</navigator>
  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切換 Tab</navigator>
  <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">開啟繫結的小程式</navigator>
</view>

這些功能涵蓋了navigator的常用功能。

但是有時候跳轉效果達不到我們想要的怎麼辦,將navigator的元件換成正常的view標籤,加上***bindtap***來執行跳轉,只是用了bindtap跳轉後就會失去navigator的優勢,比如開啟速度等等。

navigator跳轉除了url上有不明顯的區別外,在open-type上各有區別,這裡的open-type和view中的bindtap異曲同工