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