머리말
크로스 플랫폼 개발 프레임워크로서 Uniapp은 점점 더 많은 개발자들에 의해 수용되고 사용되고 있습니다. Uniapp에서 페이지 점프는 매우 일반적인 작업입니다. 페이지 점프 후에는 다음번에 이 페이지로 돌아올 때 데이터를 다시 로드하거나 일부 수행할 필요가 없도록 원본 페이지의 상태를 유지해야 하는 경우가 있습니다. 다시 복잡한 작업. 그렇다면 유니앱에서 점프 후 새로고침 없이 복귀하는 효과를 어떻게 얻을 수 있을까요? 이번 글에서는 이에 대해 자세히 소개하겠습니다.
Uniapp 페이지 점프
Uniapp에서 페이지로 이동하려면 일반적으로 uni.navigateTo 또는 uni.redirectTo 메소드를 사용합니다. 구체적인 차이점은 다음과 같습니다.
- uni.navigateTo
uni.navigateTo 메소드를 사용합니다. 페이지로 이동하면 아래 그림과 같이 현재 페이지의 스택 상단에 새 페이지가 추가됩니다.
보시다시피, 페이지 A에서 uni를 사용합니다. navigateTo는 페이지 B로 이동하여 페이지 B에 새 콘텐츠를 추가합니다. 이 콘텐츠는 페이지 A의 상단에 표시되며, 페이지 A로 돌아가면 페이지 B가 삭제됩니다. 스택입니다. 구조는 동일합니다.
- uni.redirectTo
uni.navigateTo와의 차이점은 uni.redirectTo를 사용하여 페이지로 이동하면 아래 그림과 같이 현재 페이지가 삭제된 다음 새 페이지로 이동한다는 것입니다.
페이지 A에서 uni.redirectTo를 사용하여 B 페이지로 이동하고 B 페이지에 새 콘텐츠를 추가하는 것을 볼 수 있지만 A 페이지로 돌아가면 B 페이지가 삭제되고 전체 페이지가 프로세스는 대기열과 같습니다.
점프 후 새로고침 없이 복귀하는 효과를 얻는 방법
위의 소개를 통해 점프 후 새로고침 없이 복귀하는 효과가 필요할 때 uni.navigateTo 또는 uni.redirectTo 메소드를 직접 사용할 수 없다는 것을 알 수 있으며, 왜냐하면 이 두 가지 All 메서드는 점프하기 전에 페이지를 파괴하기 때문입니다. 그렇다면 이것을 달성하는 방법은 무엇입니까?
구현 아이디어:
uni.switchTab 또는 uni.reLaunch 메소드를 통해 지정된 페이지로 이동합니다. 이 두 가지 방법에는 하나의 기능이 있습니다. 즉, 어떻게 점프하든 페이지가 새로 고쳐지므로 주의하세요. 여기서는 uni.navigateTo 또는 uni.navigateTo 메소드를 사용하세요.
이 탭의 라우팅 주소는 uni.switchTab 또는 uni.reLaunch를 클릭할 때 이동하는 페이지의 라우팅 주소와 동일해야 합니다. 이 탭을 클릭하면 지정된 페이지로 이동하고 점프하기 전에 페이지 상태를 유지합니다.
구현 단계:
- manifest.json 파일에 tabBar 탭을 추가하세요.
"tabBar": { "color": "#999", "selectedColor": "#007AFF", "borderStyle": "black", "backgroundColor": "#FFFFFF", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/img/tabBar/home.png", "selectedIconPath": "static/img/tabBar/home-selected.png" }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "static/img/tabBar/mine.png", "selectedIconPath": "static/img/tabBar/mine-selected.png" } ] },
manifest.json 파일에 tabBar 탭을 추가하세요. 여기에는 홈 페이지와 내 페이지라는 두 페이지가 포함되어 있습니다.
- 이동하기 전에 페이지에 버튼을 추가하고 클릭 시 지정된 페이지로 이동합니다
<template> <view class='container'> <view class='content'> <button class='button' @click='jumpToMine'>跳转到我的页面</button> </view> </view> </template> <script> export default { methods: { jumpToMine() { uni.switchTab({ //注意这里使用了switchTab方法 url: '/pages/mine/mine' }) } } } </script> <style> .container { width: 100%; height: 100%; background-color: #FFFFFF; } .content { margin-top: 100px; text-align: center; } .button { width: 200px; height: 50px; background-color: #007AFF; color: #FFFFFF; border: none; border-radius: 10px; } </style>
버튼을 추가하여 클릭 시 내 페이지로 이동하려면 uni.switchTab 메소드를 사용하세요. 여기서는 uni를 사용할 수 없습니다. .navigateTo 또는 uni.redirectTo 메소드.
- 내 페이지에 tabBar 탭 추가
<template> <view class='container'> <view class='content'> 我的页面 </view> <view class='tabBar'> <view class='tabBarItem' @click='jumpToHome'> <text class='tabBarIcon'>首页</text> </view> <view class='tabBarItem tabBarItem-selected'> <text class='tabBarIcon'>我的</text> </view> </view> </view> </template> <script> export default { methods: { jumpToHome() { uni.switchTab({ url: '/pages/index/index' }) } } } </script> <style> .container { width: 100%; height: 100%; background-color: #FFFFFF; } .content { margin-top: 100px; text-align: center; } .tabBar { position: fixed; bottom: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 50px; padding: 5px; background-color: #FFFFFF; border-top: solid 1px #DDDDDD; } .tabBarItem { flex: 1; display: flex; justify-content: center; align-items: center; height: 100%; font-size: 14px; color: #999; } .tabBarItem-selected { color: #007AFF; } .tabBarIcon { font-size: 14px; } </style>
내 페이지에 tabBar 탭을 추가했습니다. 이 탭에는 홈페이지와 광산이라는 두 개의 tabBar 항목이 포함되어 있으며, 그 중 탭은 선택된 상태로 설정됩니다.
- 효과 시연
여기서 효과를 보여드리겠습니다:
https://img-blog.csdn.net/20190118135008629?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jsb2dwYW5fY 2xv dWQ=/
위 내용은 전체 내용입니다 이 기사의. 이 글을 통해 유니앱에서 점프 후 새로고침 없이 돌아오는 효과를 얻는 방법을 마스터하셨다고 생각합니다. 도움이 되었으면 좋겠습니다.
위 내용은 점프 후 새로고침 없이 uniapp이 어떻게 돌아오나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

이 기사는 모바일 및 웹 플랫폼 용 디버깅 전략, Android Studio, Xcode 및 Chrome DevTools와 같은 도구 및 OS 및 성능 최적화 전반에 걸쳐 일관된 결과를위한 기술을 강조 표시합니다.

이 기사는 HBuilderx, WeChat 개발자 도구 및 Chrome Devtools와 같은 도구에 중점을 둔 UniAPP 개발을위한 디버깅 도구 및 모범 사례에 대해 설명합니다.

이 기사는 여러 플랫폼에서 UniAPP 응용 프로그램에 대한 엔드 투 엔드 테스트에 대해 설명합니다. 테스트 시나리오 정의, Appium 및 Cypress와 같은 도구 선택, 환경 설정, 테스트 작성 및 실행, 결과 분석 및 Integrat을 다룹니다.

이 기사는 장치, 통합, 기능, UI/UX, 성능, 크로스 플랫폼 및 보안 테스트를 포함한 UniAPP 응용 프로그램에 대한 다양한 테스트 유형에 대해 설명합니다. 또한 크로스 플랫폼 호환성을 보장하고 JES와 같은 도구를 권장합니다.

이 기사는 과도한 글로벌 데이터 사용 및 비효율적 인 데이터 바인딩과 같은 UniAPP 개발의 일반적인 성능 방지 방지에 대해 설명하며, 더 나은 앱 성능을 위해 이러한 문제를 식별하고 완화하는 전략을 제공합니다.

이 기사는 프로파일 링 도구를 사용하여 UniAPP의 성능 병목 현상을 식별하고 해결하고 설정, 데이터 분석 및 최적화에 중점을 둡니다.

이 기사는 UNIAPP에서 네트워크 요청을 최적화하고 대기 시간을 줄이고 캐싱 구현 및 모니터링 도구를 사용하여 응용 프로그램 성능을 향상시키는 전략에 대해 설명합니다.

이 기사에서는 압축, 반응 형 디자인, 게으른로드, 캐싱 및 Webp 형식 사용을 통해 웹 성능을 향상시키기 위해 UniAPP의 이미지 최적화에 대해 설명합니다.


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전

Dreamweaver Mac版
시각적 웹 개발 도구
