如何實現微信小程序路由跳轉指定頁面?微信小程序路由跳轉,共有三種形式,頁面中使用navigator組件做頁面鏈接形式路由跳轉,js中可以使用wx.navigateTo--保留當前頁面,跳轉到應用內的某個頁面,wx.redirectTo--關閉當前頁面,跳轉到應用內的某個頁面 wx.navigateBack()--關閉當前頁面,回退前一頁面。
頁面鏈接。
屬性名 | 類型 | 默認值 | 說明 |
---|---|---|---|
url | String | 應用內的跳轉鏈接 | |
redirect | Boolean | false | 是否關閉當前頁面 |
hover-class | String | navigator-hover | 指定點擊時的樣式類,當hover-class="none"時,沒有點擊態效果 |
注:navigator-hover默認為{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;},
示例代碼:
/** wxss **//** 修改默認的navigator點擊態 **/ .navigator-hover { color:blue; } /** 自定義其他點擊態樣式類 **/ .other-navigator-hover { color:red; }
跳轉到新頁面 在當前頁打開(關閉了當前頁面)
{{title}} 點擊左上角返回回到之前頁面
{{title}} 點擊左上角返回回到上級頁面
// redirect.js navigator.jsPage({ onLoad: function(options) { this.setData ({ title: options.title }) } })
保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面。
OBJECT參數說明:
參數 | 類型 | 必填 | 說明 |
---|---|---|---|
url | String | 是 | 需要跳轉的應用內頁面的路徑 |
success | Function | 否 | 接口調用成功的回調函數 |
fail | Function | 否 | 接口調用失敗的回調函數 |
complete | Function | 否 | 接口調用結束的回調函數(調用成功、失敗都會執行) |
示例代碼:
wx.navigateTo({ url: 'test?id=1'})
注意:為了不讓用戶在使用小程序時造成困擾,我們規定頁面路徑只能是五層,請盡量避免多層級的交互方式。
關閉當前頁面,跳轉到應用內的某個頁面。
OBJECT參數說明:
參數 | 類型 | 必填 | 說明 |
---|---|---|---|
url | String | 是 | 需要跳轉的應用內頁面的路徑 |
success | Function | 否 | 接口調用成功的回調函數 |
fail | Function | 否 | 接口調用失敗的回調函數 |
complete | Function | 否 | 接口調用結束的回調函數(調用成功、失敗都會執行) |
示例代碼:
wx.redirectTo({ url: 'test?id=1'})
關閉當前頁面,回退前一頁面。