uniapp에서 이전 페이지로 돌아가서 페이지를 새로 고치는 방법

Uniapp은 Vue.js 프레임워크를 기반으로 개발된 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크입니다. 개발 과정에서 이전 페이지로 이동하여 페이지를 새로 고쳐야 하는 경우가 종종 있습니다. 이 글에서는 이를 달성하는 방법을 소개합니다. 기능.

1. 사전 지식

이전 페이지로 돌아가서 페이지를 새로 고치는 과정에서 uni.navigateBack 및 uni.$emit라는 두 가지 API를 사용해야 합니다.

uni.navigateBack은 이전 페이지로 이동하기 위해 uniapp으로 캡슐화한 API입니다. 이 API를 호출하면 바로 이전 페이지로 이동하고 이전 페이지의 onLoad 함수에 매개변수를 전달할 수 있습니다.

uni.$emit는 uniapp에 캡슐화된 이벤트 트리거 API입니다. 이 API를 통해 현재 페이지에서 사용자 정의 이벤트가 트리거되고 데이터가 다른 페이지로 전달될 수 있습니다.

2. 구현 아이디어

이전 페이지로 돌아가서 페이지를 새로 고치는 과정에서 다음 두 단계를 완료해야 합니다.

1. 이전 페이지의 onLoad 함수에서 현재 페이지가 전달한 매개변수를 가져옵니다. 페이지 및 매개변수에 따라 페이지를 새로 고칩니다.
2. 현재 페이지에서 uni.navigateBack을 호출하여 이전 페이지로 돌아가고, uni.$emit를 통해 맞춤 이벤트를 트리거하고, 이전 페이지에 매개변수를 전달합니다.

위의 아이디어를 바탕으로 이전 페이지로 돌아가고 페이지를 새로 고치는 기능을 단계별로 구현합니다.

3. 구현 단계

1. 이전 페이지의 onLoad 함수에서 현재 페이지가 전달한 매개변수를 가져오고 매개변수에 따라 페이지를 새로 고칩니다.

이전 페이지의 onLoad 함수에서 옵션 개체를 사용하여 현재 페이지에서 전달된 매개변수를 가져올 수 있습니다. 매개변수 값을 판단하여 페이지를 새로 고칠 수 있습니다.

샘플 코드는 다음과 같습니다.

onLoad: function(options) {
    if (options.refresh === 'true') {
        // 刷新操作
    }
}

2. 현재 페이지에서 uni.navigateBack을 호출하여 이전 페이지로 돌아가고, uni.$emit를 통해 커스텀 이벤트를 트리거하고 이전 페이지로 매개변수를 전달합니다.

현재 페이지에서 uni.navigateBack을 호출하면 이전 페이지로 돌아갈 수 있습니다. 하지만 이전 페이지로 돌아가기 전에 uni.$emit를 사용하여 맞춤 이벤트를 트리거하고 매개변수를 이전 페이지에 전달해야 합니다.

샘플 코드는 다음과 같습니다.

// 触发自定义事件并传递参数给上一页
uni.$emit('refresh', { refresh: true });

// 跳转回上一页
uni.navigateBack({
    delta: 1
});

이전 페이지에서는 새로 고침 이벤트를 수신하고 이벤트 콜백 함수에서 페이지를 새로 고쳐야 합니다.

샘플 코드는 다음과 같습니다.

// 监听自定义事件并进行页面刷新操作
onShow: function() {
    uni.$on('refresh', (data) => {
        if (data.refresh) {
            // 刷新操作
        }
    });
},
onUnload: function() {
    uni.$off('refresh'); // 需要手动解绑自定义事件
}

위 단계를 통해 이전 페이지로 이동하고 페이지를 새로 고치는 기능을 성공적으로 구현했습니다.

4. 요약

본 글에서는 유니앱 개발 시 이전 페이지의 onLoad 함수에서 파라미터를 가져와서 페이지 새로고침 작업을 수행하여 이전 페이지로 돌아가고 페이지를 새로고침하는 기능을 구현하는 방법을 소개하고, 현재 페이지에서 uni.$emit를 통해 사용자 정의 이벤트를 트리거하고 매개변수를 전달하여 페이지를 새로 고칩니다. 이 방법을 통해 유니앱 애플리케이션 개발 시 이전 페이지로 돌아가서 페이지를 새로 고치는 기능을 쉽게 구현할 수 있습니다.

위 내용은 uniapp에서 이전 페이지로 돌아가서 페이지를 새로 고치는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!