
如何實現微信小程序路由跳轉指定頁面?微信小程序路由跳轉,共有三種形式,頁面中使用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'})關閉當前頁面,回退前一頁面。