pc端控制渲染小程序之自定义tabBar_skyline模式首页标题栏-CSDN博客

本文链接：https://blog.csdn.net/qq_36083613/article/details/128237390

需求是这样的：底部的tabBar可以跳转任意页面。

刚开始接到这样的需求，我很难受，原因是：

1.底部导航栏规定了最多5个主页面，可以通过wx.switchTab()进行跳转。
2.规定的主页面还需要在app.json中定义好

这样是不能实现底部tabBar跳转任意页面的。

因此经过时间研究后，得到结果：

自己自定义tabBar组件，不用微信小程序自定义的tabBar组件,然后再需要应该应用的主页面上添加tabBar组件。

//跳转方法
export const jump = function (target,tabSource = false) {
    console.log("跳转",target)
    if (!target) return
    let { name, type, id,path,param } = target.jump

    switch (type) {
        case 'fixed': // 固定页面
            name = name ? name : type
            break
        case 'custom': // 自定义页面是否已配置首页或Tab页，如果已配置则对应跳转
            let targets = findTab(id)
            console.log("跳转name",targets)
            name = targets ? targets.jump.name : target.jump.type
            break
    }
    // 储存当前跳转信息
    // wx.setStorageSync('jump', { name, type, id })
    console.log("跳转name",name)
    switch (name) {
        case 'home':
            wx.switchTab({
                url: '/pages/home/page'
            })
            break
        case 'customize_one':
            wx.switchTab({
                url: '/pages/customize_one/page'
            })
            break
        case 'customize_two':
            wx.switchTab({
                url: '/pages/customize_two/page'
            })
            break
        case 'customize_three':
            wx.switchTab({
                url: '/pages/customize_three/page'
            })
            break
        case 'customize_four':
            wx.switchTab({
                url: '/pages/customize_four/page'
            })
            break
        //自定义页面
        case 'custom':
            wx.navigateTo({
                url: `/subPackages/custom/index?pageId=${id}&&tabSource=${tabSource}`
            })
            break
        //固定页面
        case 'fixed':
            wx.navigateTo({
                url: path,
                success: function (res) {
                    res.eventChannel.emit('acceptData', {
                        param: param,
                        tabSource:tabSource
                    })
                  },
                  fail(res){
                      console.log("跳转错误",res)
                      console.log("跳转路径报错",path)
                  }
            })
        break;
    }
}

和后台进行探讨后，把页面分成2种：固定页面和自定义页面。
固定页面就是跳转到完全写好的页面
自定义页面是通过pc端控制拖拽得到的页面。
我把固定页面的路径存入了数据库，自定义页面的路径前端控制。
至于app.json中定义的导航list，我全部放了自定义页面，定义了5个自定义主页面

因此如果底部导航栏是需要跳转固定页面，就用wx.navigateTo，如果是跳转自定义页面，就用wx.switchTab.虽然这样有个问题，就是跳转固定页面时候，导航栏会带返回按钮，但是可以通过自定义导航栏实现是否需要返回按钮。

//这个方法是底部导航栏高亮显示的方法，在attached中进行调用
onClickTabBar: function () {
            let that = this;
            let length = getCurrentPages().length
            let pagePath = getCurrentPages()[length - 1].route;

            that.data.list.forEach((item, i) => {
                if (item.jump.path === `/${pagePath}`) {
                    that.setData({
                        selected: i
                    })
                }
            })
        }