uniapp小程序自定义底部tabbar

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

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

onLaunch() {
    uni.hideTabBar({
	animation: false
    });
},

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

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

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

<scroll-view class="home-tabbar-page" scroll-y enable-back-to-top  @scrolltolower="tabbarPageScrollLower"<Tools></Tools></scroll-view>

踩坑点：记得设置css样式

.home-tabbar-page {
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
}

然后就是我的页面子组件进行登录操作，踩坑点：登录后数据没有同步， 里在登录页面进行调用子组件的方法 prePage.$vm.$refs.my.getCookie();

uni.setStorage({
    key: 'userList',
    data: this.userInfo,
    success: (res) = >{
        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)
    }
})