Bagaimanakah uniapp kembali selepas melompat tanpa menyegarkan?

Kata Pengantar

Sebagai rangka kerja pembangunan merentas platform, Uniapp telah diterima dan digunakan oleh semakin ramai pembangun. Dalam Uniapp, lompat halaman adalah operasi yang sangat biasa Selepas lompatan halaman, kadangkala perlu mengekalkan status halaman asal, supaya pada kali berikutnya anda kembali ke halaman ini, anda tidak perlu memuat semula data atau melakukan beberapa. operasi rumit lagi. Jadi, bagaimana untuk mencapai kesan kembali tanpa menyegarkan selepas melompat dalam Uniapp? Artikel ini akan memperkenalkannya kepada anda secara terperinci.

Lompatan halaman Uniapp

Untuk melakukan lompatan halaman dalam Uniapp, kami biasanya menggunakan kaedah uni.navigateTo atau uni.redirectTo adalah seperti berikut:

1. uni.navigateTo

Apabila menggunakan kaedah uni.navigateTo untuk melompat ke halaman, halaman baharu akan ditambahkan ke bahagian atas timbunan halaman semasa ini halaman semasa, seperti berikut Seperti yang ditunjukkan dalam gambar:

Seperti yang anda lihat, kami menggunakan uni.navigateTo dalam halaman A untuk melompat ke halaman B, dan menambah yang baharu kandungan ke halaman B, ini Kandungan akan muncul di bahagian atas halaman A, dan apabila kita kembali ke halaman A, halaman B akan dimusnahkan Seluruh proses adalah seperti struktur tindanan.

2. uni.redirectTo

Perbezaan daripada uni.navigateTo ialah apabila menggunakan uni.redirectTo untuk melompat ke halaman, halaman semasa akan dipadamkan dan kemudian melompat ke Halaman baharu, seperti yang ditunjukkan di bawah:

Seperti yang anda lihat, kami menggunakan uni.redirectTo dalam halaman A untuk melompat ke halaman B, dan menambah dalam halaman B A kandungan baharu , tetapi apabila kita kembali ke halaman A, halaman B telah dimusnahkan, dan keseluruhan proses adalah seperti baris gilir.

Bagaimana untuk mencapai kesan kembali selepas melompat tanpa menyegarkan

Melalui pengenalan di atas, kita boleh tahu bahawa apabila kita memerlukan kesan kembali tanpa menyegarkan selepas melompat, kita tidak boleh langsung menggunakan uni. kaedah navigateTo atau uni .redirectTo, kerana kedua-dua kaedah akan memusnahkan halaman sebelum lompatan. Jadi, bagaimana untuk mencapai ini?

Idea pelaksanaan:

Pergi ke halaman yang ditentukan melalui kaedah uni.switchTab atau uni.reLaunch Kedua-dua kaedah ini mempunyai satu ciri, iaitu, tidak kira bagaimana anda melompat, halaman itu akan segar semula, jadi beri perhatian Anda tidak boleh menggunakan kaedah uni.navigateTo atau uni.redirectTo di sini.

Tambah tabBar tab pada halaman yang perlu dilompat Alamat penghalaan tab ini mestilah sama dengan alamat penghalaan halaman yang uni.switchTab atau uni.reLaunch pergi dengan cara ini , apabila kita mengklik tab ini, ia akan melompat ke halaman yang ditentukan dan mengekalkan status halaman sebelum lompatan.

Langkah pelaksanaan:

1. Tambah tab Bar tab dalam fail manifest.json

"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"
    }
  ]
},

Tambah tabBar tab dalam fail manifest.json, Ia mengandungi dua halaman, iaitu laman utama dan halaman saya.

2. Tambah butang pada halaman sebelum melompat dan lompat ke halaman yang ditentukan apabila diklik

<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>

Dengan menambahkan butang, gunakan kaedah uni.switchTab untuk melompat apabila diklik Pergi ke halaman saya Sila ambil perhatian di sini bahawa anda tidak boleh menggunakan kaedah uni.navigateTo atau uni.redirectTo.

3. Tambah tabBar tab ke halaman saya

<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>

Dalam halaman saya, kami menambah tab tabBar yang mengandungi dua tabBarItems , masing-masing halaman utama dan saya, di mana tab ini saya ditetapkan kepada keadaan yang dipilih.

4. Demonstrasi Kesan

Di sini saya akan tunjukkan kesannya:

https://img-blog.csdn.net/20190118135008629?watermark/ 2 /text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jsb2dwYW5fY2xvdWQ=/

Di atas ialah keseluruhan kandungan artikel ini. Melalui mengkaji artikel ini, saya percaya anda telah menguasai cara untuk mencapai kesan kembali tanpa menyegarkan selepas melompat dalam Uniapp. Semoga ia membantu semua orang.

Atas ialah kandungan terperinci Bagaimanakah uniapp kembali selepas melompat tanpa menyegarkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!