從零開始開發微信小程式4種頁面跳躍的方法 (六)

小云云
發布: 2018-05-11 16:54:08
原創
3377 人瀏覽過

用法:用於頁面跳轉,相當於html裡面的標籤。本文主要和大家分享從零開始開發微信小程式4種頁面跳轉的方法 (六),希望能幫助大家。

四種跳轉的方法,在index裡面寫下一段程式碼進行測試

1:從首頁跳到日誌頁面(可以返回)

(注意,在沒有設定底部導覽的情況下,沒有tab也可使用此屬性,有tab頁則需更換switchTab屬性)

<view>
    <navigator  url="/pages/logs/logs" hover-class="changestyle">页面跳转,可以返回</navigator></view>
登入後複製

2:從首頁跳到日誌頁面(不可以返回)

(注意,在沒有設定底部導覽的情況下,沒有tab也可使用此屬性,有tab頁則需更換switchTab屬性)

<view>
    <navigator  url="/pages/logs/logs" hover-class="changestyle" redirect>页面跳转,无法返回</navigator></view>
登入後複製

3:在當前頁面打開

新建一個資料夾,命名為no,完善裡面的wxml測試信息,為了方便測試隨意填充內容

<view class="btn-area">  
   <navigator url="/pages/test/test" hover-class="navigator-hover">我是一个自由分散的页面哦</navigator>  
 </view>
登入後複製

開啟全域app.json文件,將剛剛新建資料夾no的路徑寫入

圖片. png。

我們現在要測試從首頁的鏈接上打開,點擊鏈接,即可在當前的首頁頁面打開no頁面。

4:切換到tab頁:

代码<view><navigator url="/pages/logs/logs" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator></view>
登入後複製
注意:我這裡用的跳轉是switchTab跳轉,而不是navigator

#原因:所有的頁面路徑都需配置在pages下面tabBar裡一般就是四個主頁面,這些主頁面之間的跳轉就像tab切換,這幾個頁面需要在tabBar裡另外配置,普通頁面向這四個主頁跳轉的時候,不能使用navigator,需用switchTab。

經驗總結:TabBar中的list項目的配置pagePath,盡量不要作為其他頁面的跳躍連結。

以上是從零開始開發微信小程式4種頁面跳躍的方法 (六)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板