점프 후 새로고침 없이 uniapp이 어떻게 돌아오나요?-uni-app-php.cn

점프 후 새로고침 없이 uniapp이 어떻게 돌아오나요?

WBOY

풀어 주다： 2023-05-26 09:20:07

원래의

609명이 탐색했습니다.

머리말

크로스 플랫폼 개발 프레임워크로서 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 항목이 포함되어 있으며, 그 중 탭은 선택된 상태로 설정됩니다.