一、navigator--完成頁面之間的跳轉 1、新建一個頁面文件夾 2、在app.json文件中引入頁面 "pages": [ "pages/index/index", "pages/ranking/ranking" ], 3、在wxml頁面中用navgator標簽實現跳轉 <navigator ...
一、navigator--完成頁面之間的跳轉
1、新建一個頁面文件夾
2、在app.json文件中引入頁面"pages": [ "pages/index/index", "pages/ranking/ranking" ],
3、在wxml頁面中用navgator標簽實現跳轉
<navigator url="../ranking/ranking">排行榜</navigator>
二、頁面間跳轉和傳值
1、在地址後面用 ?屬性=屬性值 的方式傳值,多個屬性之間用 & 連接
<navigator url="../ranking/ranking?name=月排行榜&age=1">排行榜</navigator>
2、在跳轉後的頁面的 .js 文件中接收值,options中數據就是頁面跳轉時傳遞的值
Page({
onLoad: function (options) {
console.log(options)
}
})
註:reditect跳轉,這個跳轉是沒有過度的,不能返回,適用於只出現一次的頁面
<navigator url="../ranking/ranking?name=月排行榜&age=1" redirect>排行榜</navigator>
三、微信小程式使用API跳轉
<!-- index.wxml --> <view> <navigator url='../demo1/demo1'>普通頁面跳轉</navigator> <button bindtap='ondemo1'>通過API跳轉</button> <button bindtap='ondemo2'>通過API跳轉,不能返回</button> </view>
//index.js //獲取應用實例 const app = getApp() Page({ ondemo1:function(){ wx:wx.navigateTo({ url: '../demo1/demo1', success: function(res) { console.log("通過API跳轉成功") }, // 成功時的回調函數 fail: function(res) {}, //失敗時的回調函數 complete: function(res) {}, //完成時的回調函數,無論成功或失敗都會執行 }) }, ondemo2:function(){ wx:wx.redirectTo({ url: '../demo2/demo2', success: function(res) {}, fail: function(res) {}, complete: function(res) {}, }) } })
<!--pages/demo1/demo1.wxml--> <text>pages/demo1/demo1.wxml</text> <button bindtap='toback'>返回上一級</button>
// pages/demo1/demo1.js Page({ toback:function(){ // wx:wx.navigateBack() wx:wx.navigateBack({ delta: 1, //delta指定返回的頁面,預設是1 }) } })