uniapp设置tabBar跳转后,其他页面跳转到主页、主页参数、接参(整理)

简介: uniapp设置tabBar跳转后,其他页面跳转到主页、主页参数、接参(整理)
"tabBar": {
  // #ifdefAPP-PLUS
  // tabbar 上边框的颜色
  // "borderStyle": "#fd65f8",
  // #endif
  // tab 上的文字默认颜色
  "color": "#222222",
  // tab 上的文字选中时的颜色
  "selectedColor": "#F21177",
  // tab 的背景色
  "backgroundColor": "#ffffff",
  "list": [{
    "pagePath": "pages/home/index",
    "text": "首页",
    "iconPath": "static/nav/icon_home_n.png",
    "selectedIconPath": "static/nav/icon_home_s.png"
  }, {
    "pagePath": "pages/home/localityIndex",
    "text": "本地生活",
    "iconPath": "static/nav/icon_bdsh_n.png",
    "selectedIconPath": "static/nav/icon_bdsh_s.png"
  }, {
    "pagePath": "pages/home/orderIndex",
    "text": "订单",
    "iconPath": "static/nav/icon_dd_n.png",
    "selectedIconPath": "static/nav/icon_dd_s.png"
  }, {
    "pagePath": "pages/home/myIndex",
    "text": "我的",
    "iconPath": "static/nav/icon_me_n.png",
    "selectedIconPath": "static/nav/icon_me_s.png"
  }],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
},
那么对应的4个页面就都会出现tabBar,如果想要通过代码跳转到这几个页面,比如进入到某个子页面后,想返回到首页,需要使用switchTab
uni.switchTab({
  url: '/pages/home/index'
})
主页监听进来后的事件
methods: {
  // 点击底部tabBar事件
  onTabItemTap(e) {
    //刷新接口
    console.log(e,'点击底部tabBar事件');
  },
}
要想传主页参数就把参数存本地看图一。
主页接收数据看图二。


相关文章
|
6月前
|
JavaScript 数据安全/隐私保护 UED
UniApp 中的路由魔法:玩转页面导航与跳转
UniApp 中的路由魔法:玩转页面导航与跳转
1618 3
|
6月前
uniapp Vue3 日历 可签到 跳转
uniapp Vue3 日历 可签到 跳转
68 0
|
6月前
|
JavaScript
uniapp+vue3路由跳转传参
uniapp+vue3路由跳转传参
315 0
|
6月前
|
Web App开发 小程序 Android开发
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
172 0
|
6月前
|
小程序 前端开发
uniapp 小程序接入友盟 ,自定义事件携带参数
uniapp 小程序接入友盟 ,自定义事件携带参数
125 0
|
6月前
|
开发框架 移动开发 Android开发
uniapp的几种跳转方式
uniapp的几种跳转方式
|
6月前
uniapp的两个跳转方式
uniapp的两个跳转方式
|
2月前
|
API
uniapp使用路由名称跳转
【9月更文挑战第11天】在UniApp中,可通过定义路由名称实现页面跳转,需在`pages.json`中设置页面的`name`属性。使用`uni.navigateTo`等API并指定名称即可跳转,例如`name: 'detailPage'`。目标页面可在`onLoad`函数中获取传递的参数,这种方式使代码更清晰且便于维护,尤其适合大型项目。
|
4月前
|
移动开发 前端开发 小程序
uniapp内置组件uni.navigateTo跳转后页面空白问题解决
【7月更文挑战第1天】uniapp内置组件uni.navigateTo跳转后页面空白问题解决
117 4
|
4月前
uniapp 底部导航栏 tabBar
uniapp 底部导航栏 tabBar
57 0