当前位置: 首页 > news >正文

点击底部的 tabBar 属于 wx.switchTab 跳转方式,目标页面的 onLoad 不会触发(除非是第一次加载)

文章目录

      • 1. `tabBar` 的跳转方式
      • 2. `tabBar` 跳转的特点
      • 3. 你的配置分析
      • 4. 生命周期触发情况
      • 5. 总结

  • 很多人不明白什么是第一次加载,两种情况讨论,第一种情况假设我是开发者,第一次加载就是指点击微信开发者工具上边的编译按钮,每点击一次就是一次加载。

在这里插入图片描述

  • 第二种情况,就是用户身份,当用户第一次进入微信小程序时,这时会第一次加载,如果此时退出微信小程序,再次进入微信小程序,会不会重新加载?这个都有可能,情况比较多,比如手机内存充足,就不会重新加载,内存不足,可能需要重新加载,所以这个得看情况。

在微信小程序中,点击底部的 tabBar 属于 wx.switchTab 跳转方式。


1. tabBar 的跳转方式

  • 当你点击 tabBar 中的某个选项时,小程序会使用 wx.switchTab 的方式进行页面跳转。
  • wx.switchTab 是专门用于跳转到 tabBar 页面的 API,它会关闭所有非 tabBar 页面,并切换到目标 tabBar 页面。

2. tabBar 跳转的特点

  • 页面栈管理
    • tabBar 页面是独立的,不会保留非 tabBar 页面的页面栈。
    • 跳转到 tabBar 页面时,当前页面栈中的所有非 tabBar 页面都会被关闭。
  • 生命周期触发
    • 跳转到 tabBar 页面时,目标页面的 onLoad 不会触发(除非是第一次加载)。
    • 每次切换到 tabBar 页面时,会触发 onShow 生命周期函数。

3. 你的配置分析

根据你的 tabBar 配置:

"tabBar": {"color": "#333","selectedColor": "#000000","backgroundColor": "#ffffff","borderStyle": "black","list": [{"pagePath": "pages/home/home","text": "产品","iconPath": "icons/Group 31.png","selectedIconPath": "/icons/Group 32.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "icons/Group 35.png","selectedIconPath": "/icons/Group 33.png"}]
}
  • 当你点击 “产品”“我的” 时,小程序会使用 wx.switchTab 的方式跳转到对应的页面(pages/home/homepages/my/my)。

4. 生命周期触发情况

  • 第一次加载
    • 目标页面的 onLoadonShowonReady 会依次触发。
  • 后续切换
    • 每次点击 tabBar 切换页面时,只会触发目标页面的 onShow,而不会触发 onLoad

5. 总结

  • 点击 tabBar 属于 wx.switchTab 跳转方式。
  • 跳转到 tabBar 页面时,onLoad 只会在第一次加载时触发,后续切换只会触发 onShow
  • 如果你需要在每次切换到 tabBar 页面时执行某些逻辑,可以将代码放在 onShow 中。
http://www.lryc.cn/news/518833.html

相关文章:

  • 基于PLC的酒店热水供应控制系统设计
  • 博客内所有项目均可在面包多平台进行购买
  • 《Mcal》--MCU模块
  • C语言:枚举类型
  • spring boot 多数据源集成mysql、postgresql、phoenix、doris等
  • USB基础 -- USB 控制传输(Control Transfer)的重传机制
  • 云计算基础,虚拟化原理
  • 浮点数在C语言开发中为什么不精确?
  • ChatGPT网络错误如何解决
  • Vue3初学之插槽(slot)使用
  • 使用PVE快速创建虚拟机集群并搭建docker环境
  • 带格式 pdf 翻译
  • 【C++】C++11(一)
  • 初学stm32 --- ADC单通道采集
  • 【动态规划篇】欣赏概率论与镜像法融合下,别出心裁探索解答括号序列问题
  • Java(day7)
  • Word 转成pdf及打印的开源方案支持xp
  • LabVIEW软件侵权分析与应对
  • 【redis】centos7下安装redis7
  • [network]回顾:集线器(Hub)
  • 79 Openssl3.0 RSA公钥加密数据
  • EFCore HasDefaultValueSql (续2 HasComputedColumnSql)
  • 阿里巴巴TransmittableThreadLocal使用指南
  • ubuntu20下编译linux1.0 (part1)
  • 欧拉公式和傅里叶变换
  • Jenkins内修改allure报告名称
  • 30天开发操作系统 第 12 天 -- 定时器 v1.0
  • Ubuntu | PostgreSQL | 解决 ERROR: `xmllint` is missing on your system.
  • uniapp使用chooseLocation安卓篇
  • 《PC 上的开源神经网络多模态模型:开启智能交互新时代》