解决微信小程序使用switchTab跳转后页面不刷新的问题

最新推荐文章于 2024-08-18 16:07:34 发布
最新推荐文章于 2024-08-18 16:07:34 发布
阅读量163 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/shimily/articles/10756583.html
本文介绍了一段使用微信小程序API实现跳转至购物车页面，并在跳转成功后执行页面刷新的代码示例。

 



wx.switchTab({
    url: '/pages/cart/index',
    success:function () {
var page = getCurrentPages().pop();
        if (page == undefined || page == null) return;
        page.onLoad();   //重新刷新页面
    }
})






 


转载于:https://www.cnblogs.com/shimily/articles/10756583.html

                

        




    

    
  



    



                



	

		

			

				
					
【小技巧】解决微信小程序switchTab后tab不刷新

				
			

			

				

					qunbook-设计与数据的介乎额
				

				

					05-20
					
					1615
					
				

			

		

		

			
				
【原因】如果tab之前已经打开，再跳转到tab页是不走任何生命周期的。

【解决】所以只能获取当前打开的所有页，再找到最后的那个页面即时当前显示的页面，跳转成功的那个页面。
再调用onShow方法强制刷新！

【代码片段】

wx.switchTab({ 
 url: '../index/index', 
 success: function (e) { 
 var page = getCurrentPages().pop(); 
 if (page == undefined || ...

			
		

	



                

            
              



	

		

			

				
					
微信小程序页面跳转后Page里的data数据消失的问题

				
			

			

				

					qq_45963949的博客
				

				

					01-15
					
					4867
					
				

			

		

		

			
				
一般出现这样的问题都是不正确的路由跳转导致的：
微信小程序有多种路由跳转的接口如wx.switchTab，wx.reLaunch，wx.redirectTo，wx.navigateTo，wx.navigateBack
在学习这些路由跳转接口的时候需要知道一个前提，那就是微信小程序页面的生命周期：




函数
功能




onLoad
监听页面加载


onReady
监听页面初次渲染完成


onShow
监听页面显示


onHide
监听页面隐藏


onUnload
监听页面关闭


然后我们其中

			
		

	



              


  
              

                


	

		

			

				
					
微信小程序出现wx.navigateTo页面不跳转问题的解决方法

				
			

			

				

					08-28
				

			

		

		

			
				
主要介绍了微信小程序出现wx.navigateTo页面不跳转问题的解决方法,简单分析了微信小程序出现wx.navigateTo页面不跳转情况的原因及相应的解决方法,需要的朋友可以参考下

			
		

	





	

		

			

				
					
小程序使用switchTab跳转后页面不刷新，Html转Json转Wxml

				
			

			

				

					03-29
				

			

		

		

			
				
一：使用switchTab跳转后页面不刷新的问题 分享者：yonggeit，原文地址   wx.switchTab({ url: '../index/index', success: function (e) { var page = getCurrentPages().pop(); if (page == undefined || page ==...

			
		

	



		

			
		



	

		

			

				
					
微信小程序通用的js代码

				
			

			

				

					09-19
				

			

		

		

			
				
在这个“微信小程序通用的js代码”压缩包中，很显然包含了一些适用于微信小程序开发的JavaScript代码片段，这些代码可能是解决常见问题的函数、工具类库或者是优化性能的方法。  在微信小程序的开发中，JavaScript是...

			
		

	





	

		

			

				
					
[微信小程序]自定义Tabbar的使用以及闪回问题解决

				
			

			

				

					m0_54699306的博客
				

				

					09-20
					
					1822
					
				

			

		

		

			
				
问题描述:



在使用微信小程序自定义Tabbar的时候，使用wx.switchTab(url)方法进行跳转时，路径跳转成功，但是Tabbar图标出现闪回(切换到了正确图标的瞬间闪回到了上一个图标)




问题详情:


①初始状态如下



②点击分类按钮时，路径成功进行了跳转，而图标栏瞬间跳转到分类后闪烁返回到了首页图标，渲染失败







③多次测试均出现问题





相关源码:



wxml:


 <view class="cu-bar tabbar   bg-whit...

			
		

	





	

		

			

				
					
微信小程序之switchTab跳转后页面不刷新的问题【前端】

				
			

			

				

					chipang7687的博客
				

				

					08-21
					
					974
					
				

			

		

		

			
				
wx.switchTab跳转后的页面是不刷新的 
针对这个问题有两种解决方案： 
1.使用switchTab的成功回调 
      success(res){
            let page = getCurrentPages().pop();
            if(p...

			
		

	





	

		

			

				
					
微信小程序使用switchTab跳转后页面不刷新的问题：

				
			

			

				

					HonG
				

				

					09-04
					
					785
					
				

			

		

		

			
				
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。


rpx换算px (屏幕宽度/750)
px换算rpx (750/屏幕宽度)


...

			
		

	





	

		

			

				
					
uniapp使用switchTab跳转tabBar页面不会自动刷新

				
			

			

				

					weixin_56709740的博客
				

				

					03-26
					
					1521
					
				

			

		

		

			
				
在其他页面修改数据之后，再使用switchTab进入页面的时候，希望他能在进入页面的时候就直接刷新页面实现更改数据的效果。

			
		

	





	

		

			

				
					
解决使用uniapp时，uni.switchTab跳转标签页面不刷新的问题

				
			

			

				

					2301_78646673的博客
				

				

					08-18
					
					5396
					
				

			

		

		

			
				
我们在使用uni.switchTab跳转到标签页面时，并不会触发这个标签页面的onLoad方法。这是因为，所以使用 uni.switchTab跳转时，并不会重新创建页面实例，因此不会触发 onLoad生命周期方法。但是我们又会有这样的场景，在进入到标签页时，要调用一些方法来进行数据的展示，那么这时候，我们有三种常见的解决方案。

			
		

	





	

		

			

				
					
解决uni.switchTab()跳转不刷新

				
			

			

				

					qq_41283061的博客
				

				

					09-14
					
					1644
					
				

			

		

		

			
				
uni.switchTab(

			
		

	





	

		

			

				
					
小程序switchTab跳转以后页面不刷新问题的优化及解决方案

				
			

			

				

					weixin_46977007的博客
				

				

					11-18
					
					2041
					
				

			

		

		

			
				
小程序switchTab跳转以后页面不刷新问题的优化及解决方案
之前开发小程序首页的时候发现使用switchTab跳转之后，不执行onload。所以将逻辑部分放到了onshow当中，但是放在onshow当中，无论缩小至后台，重新点击tab,都会触发onshow，影响了性能。所以下午闲来无事优化了一下。
switchTab跳转以后的不刷新的主要原因是因为tabbar出于性能考虑，switchTab跳转之后，不执行onload,可以在switchTab的回调中拿到页面执行onload:
wx.switchTab

			
		

	





	

		

			

				
					
微信小程序页面返回没有刷新使用哪种跳转方式

					
最新发布

				
			

			

				

					03-20
				

			

		

		

			
				
<think>好的，我现在需要处理用户关于微信小程序页面返回时不刷新的跳转方法的问题。用户提到了使用navigateBack，但想确保返回时不刷新页面，同时保留数据。我需要结合用户提供的两个引用内容来解答。

首先，用户的问题是关于如何在微信小程序中实现返回上一页时不刷新页面，并且保留之前填写的数据。根据引用[1]，在uniapp的微信小程序项目中，返回上一页并刷新数据是通过某种方法实现的。但用户现在希望不刷新，所以需要相反的操作。引用[2]提到，在跳转到新页面选择数据后，返回时可以通过直接修改上一页的data中的数据，并使用wx.navigateBack返回，这样页面不会刷新，数据得以保留。

接下来，我需要确定微信小程序中常用的跳转方法。通常有wx.navigateTo、wx.redirectTo、wx.switchTab、wx.reLaunch和wx.navigateBack。其中，wx.navigateTo会保留当前页面实例，跳转到新页面，返回时原页面不会重新加载，而是从栈中取出，这可能符合用户的需求。而wx.redirectTo会关闭当前页面，可能导致数据丢失。

根据引用[2]的解决方案，当从新页面返回时，直接修改上一页的data，这样即使不刷新，数据也会保留。因此，关键在于如何在新页面中获取和修改上一页的数据。微信小程序中可以通过getCurrentPages()获取页面栈，然后找到上一页的实例，直接修改其data。这种方法不需要触发页面的刷新，数据会被保留。

用户提到的navigateBack的delta参数是用来指定返回的层数，默认是1。使用navigateBack返回时，页面栈中的上一页会被展示，如果该页面没有被销毁，那么其data中的数据仍然存在。因此，只要在跳转前使用navigateTo，并且在返回时不使用redirectTo或reLaunch等会关闭页面的方法，就可以保持页面不刷新。

总结起来，正确的做法是使用wx.navigateTo跳转到新页面，在新页面中完成操作后，通过getCurrentPages()获取上一页实例，修改其data，再调用wx.navigateBack返回。这样上一页不会刷新，数据也被更新。需要确保在跳转时使用navigateTo而不是redirectTo，因为后者会替换当前页面，可能导致页面实例被销毁。

还需要注意，直接修改页面实例的data可能不会自动触发页面更新，因此可能需要调用setData方法。但引用[2]中提到直接修改data并通过navigateBack返回后数据保留，可能是因为页面实例仍然存活，数据变动已经被应用，但未触发渲染。可能需要进一步测试确认是否需要调用setData来确保视图更新。

最后，我应该将这些步骤整理成清晰的回答，并给出相关的问题建议，帮助用户进一步理解应用场景和潜在的问题。</think>在微信小程序中，若需要实现**返回上一页不刷新页面且保留数据**，可通过以下方法实现：

---

### 核心解决方案：`wx.navigateBack` + **页面栈数据操作**
1. **跳转方式选择**  
   使用 `wx.navigateTo` 跳转到新页面（非关闭当前页），保留当前页实例：  
   ```javascript
   wx.navigateTo({ url: '/pages/newPage' })
   ```  
   此方法会将当前页面保留在页面栈中，返回时直接复用实例[^2]。

2. **返回时保留数据**  
   在新页面中操作上一页数据：  
   ```javascript
   const pages = getCurrentPages(); // 获取页面栈
   const prevPage = pages[pages.length - 2]; // 获取上一页实例
   prevPage.setData({ key: 'newValue' }); // 直接修改上一页数据
   wx.navigateBack({ delta: 1 }); // 返回上一页
   ```  
   通过 `setData` 更新数据后，返回时页面不会触发 `onLoad` 或 `onShow` 中的刷新逻辑。

3. **注意事项**  
   - 若使用 `wx.redirectTo` 或 `wx.reLaunch` 跳转，会关闭当前页，导致数据丢失。
   - 页面栈最多支持10层，需避免过度跳转。

---

### 适用场景
- **表单数据保留**：如填写表单时跳转选择子项，返回后已填内容不变。
- **状态保持**：页面需保留用户操作痕迹（如滚动位置、临时输入）。

---

### 其他跳转方法对比
| 方法               | 行为                     | 是否刷新页面 |  
|--------------------|--------------------------|--------------|  
| `wx.navigateTo`    | 保留当前页，跳转新页     | 否           |  
| `wx.redirectTo`    | 关闭当前页，跳转新页     | 是           |  
| `wx.navigateBack`  | 返回上一页               | 否           |  
| `wx.switchTab`     | 切换至 Tab 页            | 是           |  

---

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值