先说这个问题,如何向tabbar页面传递参数,为什么会有这个问题,请看uniapp的文档上是这么写的;
所以像下方写的代码,是完全不生效的!只会跳到tabbar center页面,但是并不能在onLoad中获取到传递的参数
uni.switchTab({
url: '/pages/center/center?id=999'
那么如何去向tabbar页面传递参数?
1. 利用缓存storage
<template>
<view><button @click="click">去tabbar center页面</button></view>
</template>
<script>
export default {
methods: {
click() {
uni.setStorageSync('id', 999);
uni.switchTab({
url: '/pages/center/center'
</script>
tabbar页面 center
<template>
<view>center</view>
</template>
<script>
export default {
onShow() {
const id = uni.getStorageSync('id');
console.log(id);
</script>
2. 利用全局变量globalData
App.vue
list页面
<template>
<view><button @click="click">去tabbar center页面</button></view>
</template>
<script>
export default {
methods: {
click() {
// 利用App.vue globalData
getApp().globalData.id = 999;
uni.switchTab({
url: '/pages/center/center'
</script>
tabbar页面 center
<template>
<view>center</view>
</template>
<script>
export default {
onShow() {
const id = getApp().globalData.id;
console.log(id);
</script>
3. 利用vuex
store/index.js
list.vue
<template>
<view><button @click="click">去tabbar center页面</button></view>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
methods: {
...mapMutations(['setId']),
click() {
// 3.利用vuex
this.setId(999);
uni.switchTab({
url: '/pages/center/center'
</script>
tabbar页面 center
<template>
<view>center</view>
</template>
<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['id'])
onShow() {
console.log(this.id);
</script>
除此之外有人可能会想起为什么不适用uni.$on uni.$emit的方式,那就是看文档又不认真了嗷
如何使用uni.$emit()和uni.$on() 进行页面间通讯 - DCloud问答
什么意思呢,就是说,如果我们tabbar center页没有被打开过,那么从任意一个页面跳转到center页面,center页面是属于首次打开的情况,那么即使你在跳转的页面使用uni.$emit发送了一个事件携带了数据,但是center中的uni.$on是监听不到的,故,在此场景中uni.$on;uni.$emit并不适用,不推荐
先说这个问题,如何向tabbar页面传递参数,为什么会有这个问题,请看uniapp的文档上是这么写的;所以像下方写的代码,是完全不生效的!只会跳到tabbar center页面,但是并不能在onLoad中获取到传递的参数uni.switchTab({ url: '/pages/center/center?id=999'});那么如何去向tabbar页面传递参数?1. 利用缓存storage<template> <view><button @
普通页跳转到普通页:open-type="navigate"(默认navigate)
普通页跳转到tabBar页面:open-type="switchTab"
tabBar页面跳转到普通页:open-type="navigate"
tabBar页面跳转到tabBar页面:open-type="switchTab"
官网中说明uni-app和小程序的switchTab跳转tabbar页面,路径后不能带参数,所以,以下使用两种方法进行tabbar页面之间的传参。
全局变量传参(globalData全局变量)
传递参数的页面:
getApp().globalData.name = "lixian";
uni.switchTab({
url:'../tabbar2/tabbar2?name=' + name
接受参数的页面:
全局变量数据加载显示在onShow方法中
onShow(){
this.name =
tabbar 在H5端是div模拟的,属于前端屏幕窗口的一部分,如果要使用bottom居底定位方式,应该使用css变量–window-bottom,比如悬浮在
tabbar上方10px的按钮,样式如下
bottom: calc(var(--window-bottom) + 10px)
在 uni-app 中,可以使用 uni.switchTab(OBJECT) 方法来切换到指定的 tab
页面,其中 OBJECT 参数中可以包含 url 和 params 两个属性,用于指定要跳转的
页面路径和传递的参数。
uni.switchTab({
url: '/pages/index/index',
params: {
name: '参数名',
要实现从登录页面跳转到tabbar页面,可以使用uni-app提供的路由跳转功能。具体步骤如下:
1. 在登录成功后,使用uni.navigateTo方法跳转到tabbar页面。例如:
uni.navigateTo({
url: '/pages/tabbar/tabbar'
2. 在tabbar页面中,需要在页面配置文件(如pages.json)中设置tabBar属性,指定底部菜单栏的样式和功能。例如:
"tabBar": {
"color": "#999",
"selectedColor": "#007aff",
"backgroundColor": "#f7f7f7",
"borderStyle": "black",
"list": [
"pagePath": "/pages/index/index",
"text": "首页",
"iconPath": "/static/tabbar/home.png",
"selectedIconPath": "/static/tabbar/home_active.png"
"pagePath": "/pages/mine/mine",
"text": "我的",
"iconPath": "/static/tabbar/mine.png",
"selectedIconPath": "/static/tabbar/mine_active.png"
注意:tabBar属性中的list数组中的每一项都需要指定pagePath属性,对应的值为tabbar页面中的子页面路径。
希望能够帮到你!
如何获取到他人小程序的页面路径
鱼儿有梦也会飞翔:
记录:通过day.js获取两个日期相差的时间,并转化为年月日的格式
关于slot-scope已经废弃的问题
城南北角: