uniapp 개발시 중간 페이지를 닫는 방법

유니앱 개발 과정에서 페이지를 닫아야 하는 경우가 종종 있습니다. 그런데 페이지를 닫을 때 가운데 페이지만 닫는 방법은 무엇일까요? 이번 글에서는 uniapp 개발에서 이 기능을 구현하는 방법을 소개하겠습니다.

1단계: 페이지 스택 이해

uniapp에서는 uni.navigateTo 및 uni.redirectTo를 사용하여 페이지로 이동할 수 있고, uni.navigateBack을 사용하여 이전 페이지로 돌아갈 수도 있습니다. 페이지로 이동하고 돌아가는 과정에서 페이지 스택이 중요한 역할을 합니다.

페이지 스택은 현재 페이지 스택의 모든 페이지를 저장하는 배열입니다. 페이지 스택을 통해 페이지 사이를 이동하고, 매개변수를 전달하고, 페이지를 닫을 수 있습니다.

기본적으로 페이지 스택은 홈 페이지(예: app.vue)에서 시작하고 최상위 페이지는 페이지 스택의 끝에 배치됩니다.

예를 들어 uni.navigateTo를 통해 A 페이지로 점프한 다음 A 페이지에서 uni.navigateTo를 통해 B 페이지로 점프합니다. 이때 페이지 스택의 구조는 다음과 같습니다.

[ home, A, B ]

그 중 home이 홈 페이지이고, 최상위 페이지가 B입니다. B 페이지에서 A 페이지로 돌아가고 싶다면 uni.navigateBack() 함수를 사용하면 됩니다.

페이지 A로 돌아가면서 페이지 B를 닫고 싶다면 어떻게 해야 하나요? 이를 위해서는 페이지 스택을 작동해야 합니다.

2단계: 페이지 스택 조작

uni.reLaunch를 통해 모든 페이지를 닫고 열려 있는 페이지에서 대상 페이지를 다시 열 수 있습니다. 하지만 우리는 중간 페이지만 닫고 싶기 때문에 그것은 필요하지 않습니다.

uniapp에서는 uni.getCurrentPages() 메서드를 통해 현재 페이지 스택을 가져올 수 있습니다. 이 메서드는 현재 페이지 스택의 모든 페이지를 저장하는 배열을 반환합니다. 이 배열을 통해 페이지 스택에서 작업할 수 있습니다.

먼저 getCurrentPages()를 통해 현재 페이지 스택의 상태를 얻을 수 있습니다.

let pages = getCurrentPages()

이때 페이지 배열은 페이지 스택의 모든 페이지를 저장합니다. 현재 페이지와 페이지 스택의 이전 페이지를 닫으려면 다음과 같이 하면 됩니다.

let pages = getCurrentPages()
let currentPage = pages[pages.length - 1]
let prePage = pages[pages.length - 2]
currentPage.$destroy()
uni.navigateBack({
  delta: 1,
  success: function () {
    prePage.setData({
      foo: 'bar'
    })
  }
})

이 코드에서는 먼저 현재 페이지 스택의 상태를 가져옵니다. 그런 다음 각각 currentPage와 prePage를 통해 현재 페이지와 이전 페이지의 인스턴스를 가져옵니다. 그런 다음 $destroy() 메서드를 통해 현재 페이지의 인스턴스 개체를 삭제할 수 있습니다.

마지막으로 uni.navigateBack() 메서드를 사용하여 이전 페이지로 돌아가서 이전 페이지의 데이터를 수정합니다.

여러 페이지를 닫고 싶다면 페이지를 반복하면서 하나씩 닫으면 됩니다. 예를 들어 현재 페이지, 이전 페이지, 이전 페이지를 닫고 싶다면 다음과 같이 하면 됩니다:

let pages = getCurrentPages()
for (let i = 0; i < 3; i++) {
  let currentPage = pages[pages.length - 1 - i]
  currentPage.$destroy()
}
uni.navigateBack({
  delta: 2,
  success: function () {
    // do something
  }
})

이렇게 하면 중간 페이지만 닫는 기능을 구현할 수 있습니다.

요약

유니앱 개발에 있어서 페이지 스택은 매우 중요한 개념입니다. 페이지 스택을 이해함으로써 페이지 간 이동, 매개변수 전달, 페이지 닫기 등의 기능을 실현할 수 있습니다.

중간 페이지를 닫으려면 getCurrentPages() 메서드를 사용하여 현재 페이지 스택의 상태를 얻은 다음 루프를 통해 페이지를 하나씩 닫고 마지막으로 uni.navigateBack() 메서드를 사용하여 이전 페이지 스택으로 돌아갈 수 있습니다. 이전 페이지.

이 기사가 도움이 되기를 바랍니다!

위 내용은 uniapp 개발시 중간 페이지를 닫는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!