摘要:一路由跳轉(zhuǎn)需求如何獲取當(dāng)前頁面的上一個頁面場景用于判斷返回哪一個頁面的時候使用當(dāng)前頁上一個頁面封裝返回上一個頁面的方法封裝返回上一個頁面的方法判斷上一個頁面然后返回上一個頁面發(fā)布頁或者訂單頁上一個頁面調(diào)用方法如何返回上上個頁面返回上一
一 路由跳轉(zhuǎn)
需求:如何獲取當(dāng)前頁面的上一個頁面
場景:用于判斷返回哪一個頁面的時候使用
const pages = getCurrentPages(); const Page = pages[pages.length - 1];//當(dāng)前頁 const prevPage = pages[pages.length - 2]; //上一個頁面
1. 封裝返回上一個頁面的方法
// 封裝返回上一個頁面的方法: export function navigateBackByPage() { // 判斷上一個頁面 然后返回上一個頁面: 發(fā)布頁或者訂單頁 const pages = getCurrentPages(); const prevPage = pages[pages.length - 2]; //上一個頁面 if (prevPage) { wx.navigateBack(); } } // 調(diào)用方法 navigateBackByPage();
2. 如何返回上上個頁面
wx.navigateBack({ delta: 2 })
3. 返回上一頁的時候把當(dāng)前頁的數(shù)據(jù)傳遞會上一個頁面
const pages = getCurrentPages(); const prevPage = pages[pages.length - 2]; //上一個頁面 // 直接調(diào)用上一個頁面的setData()方法,把數(shù)據(jù)存到上一個頁面中去 prevPage.setData({ orderId: orderId }); wx.navigateBack();二 列表頁傳遞id獲取詳情頁數(shù)據(jù)
// 01 遍歷列表頁 獲取每一項item的id 綁定到data屬性中三 動態(tài)設(shè)置頁面頂部導(dǎo)航欄標題// 02 列表頁 通過事件和參數(shù)傳遞id toOrderDetail(e) { const id = e.currentTarget.dataset.id; wx.navigateTo({ url:"order-detail/order-detail?id=" + id }) } // 03 詳情頁 在onload中間中拿到URL傳遞過來的參數(shù)id 請求詳情頁接口 拼接id參數(shù) onLoad(option) { const id = option.id; const detailApi = "http://192.168.1.142:8096/app/FindOrder/findOrderById?orderId=" + id 發(fā)起請求··· } {{item.title}}
說明
01 onload中不能設(shè)置,因為onload過程中頁面并沒有生成,所以不能操作UI,onShow渲染頁面只是一瞬間,也不能展示UI,js中操作UI和設(shè)置展示UI,只能用onReady,onLoad和onShow用來處理數(shù)據(jù)請求,處理業(yè)務(wù)邏輯 02 (重點思路)在onLoad獲取數(shù)據(jù),傳遞到data;onReady使用data中的數(shù)據(jù)渲染導(dǎo)航
// 01 數(shù)據(jù)初始化 data:{ navigationTitle:"" } // 02 在onLoad中獲取列表頁js傳遞過來的參數(shù): // 場景一:列表頁傳遞數(shù)據(jù)給詳情頁 // 場景一:直接請求接口獲取數(shù)據(jù),如果情面有多種狀態(tài),通過不同狀態(tài)動態(tài)設(shè)置導(dǎo)航 onLoad(option) { const title = option.title; this.setData({ navigationTitle:title }) } // 03 需要在onReady生命周期中設(shè)置導(dǎo)航條: onReady() { wx.setNavigationBarTitle({ title:this.data.navigetionTitle }) }四 跨頁全局傳遞數(shù)據(jù)的兩種方法
場景:實時數(shù)據(jù)傳遞
通過app.js中的全局變量globalData:{ },當(dāng)前頁的數(shù)據(jù)賦值給全局變量,另一個頁面實時獲取全局變量的值
// 頁面a app.globalData.workTypeId= workTypeId; // 頁面b const workTypeId= app.globalData.workTypeId
場景:從持久化數(shù)據(jù)中獲取數(shù)據(jù)
通過緩存來緩存數(shù)據(jù) 在任意頁面獲取
wx.setStorageSync("userInfoLogin", userInfoLogin); // 登陸后緩存用戶userId // 封裝獲取id的方法 export function getStorageUserId() { const userInfoLogin = wx.getStorageSync("userInfoLogin"); return userInfoLogin.id; } // 調(diào)用 const userId getStorageUserId()
持續(xù)更新中···
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/53282.html