uniapp小程序自定义底部tabbar

您所在的位置：网站首页 › 抖音底部导航栏怎么自定义的 › uniapp小程序自定义底部tabbar

uniapp小程序自定义底部tabbar

2023-07-25 23:12| 来源: 网络整理| 查看: 265

1.在page.json将其设置为true

2.在app.vue添加，隐藏相对应的原生tabbar

onLaunch() { uni.hideTabBar({ animation: false }); }, 复制代码

3.在主页面导入对应的子组件

这里使用:style="{ display: tabbarIndex === 0 ? '' : 'none' }"进行tabbar切换

这里使用scroll-view进行子组件加载不重新刷新，停留在原来的滚动位置，tabbarPageScrollLower监听触底滚动调用子组件的方法

{ var pages = getCurrentPages(); // 获取当前页面栈 var prePage = pages[pages.length - 2]; // 上一个页面 prePage.data.init = true // A 页面 init方法为true setTimeout(() = >{ uni.navigateBack({ delta: 1, success: function() { console.log(prePage, prePage.$vm, '$vm'); prePage.$vm.$refs.my.getCookie(); // 执行前一个页面的刷新 } }); // 返回上一页 }, 1000) }, fail: (err) = >{ console.log(err) } }) 复制代码

【本文地址】

uniapp小程序自定义底部tabbar

uniapp小程序自定义底部tabbar

今日新闻

推荐新闻