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事件');
  },
}
要想传主页参数就把参数存本地看图一。
主页接收数据看图二。


相关文章
|
19天前
|
JavaScript 数据安全/隐私保护 UED
UniApp 中的路由魔法:玩转页面导航与跳转
UniApp 中的路由魔法:玩转页面导航与跳转
216 3
|
19天前
uniapp Vue3 日历 可签到 跳转
uniapp Vue3 日历 可签到 跳转
35 0
|
19天前
|
JavaScript
uniapp+vue3路由跳转传参
uniapp+vue3路由跳转传参
164 0
|
19天前
|
Web App开发 小程序 Android开发
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
85 0
|
19天前
|
小程序 前端开发
uniapp 小程序接入友盟 ,自定义事件携带参数
uniapp 小程序接入友盟 ,自定义事件携带参数
|
19天前
|
开发框架 移动开发 Android开发
uniapp的几种跳转方式
uniapp的几种跳转方式
|
19天前
uniapp的两个跳转方式
uniapp的两个跳转方式
|
19天前
|
小程序
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
84 0
|
19天前
uniapp 实现带参数跳转页面
uniapp 实现带参数跳转页面
35 0
|
7月前
uniapp带参数跳转,新页面接收参数
uniapp带参数跳转,新页面接收参数
120 0