uniapp如何跳转后返回不刷新

百变鹏仔 2个月前 (11-20) #uniapp

文章标签跳转

前言

Uniapp作为一个跨平台的开发框架，已经被越来越多的开发者所接受和使用。在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方法，因为这两个方法都会销毁跳转前的页面。那么，该如何实现呢？

实现思路：

通过uni.switchTab或uni.reLaunch方法前往指定页面，这两个方法都有一个特点，就是无论怎么跳转，都会刷新页面，所以要注意在这里不能使用uni.navigateTo或uni.redirectTo方法。

在需要跳转的页面中添加一个tabBar选项卡，这个选项卡的路由地址要与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">跳转到我的页面</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"><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选项卡，这个选项卡包含两个tabBarItem，分别是首页和我的，其中我的这个选项卡被设为选中状态。

效果演示

这里给大家展示一下效果：

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

文章推荐

uniapp如何跳转后返回不刷新

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项