美文网首页JavaScript
uniapp微信小程序Vue3解决自定义tabbar的问题

uniapp微信小程序Vue3解决自定义tabbar的问题

作者: 剑指流云 | 来源:发表于2023-03-17 17:53 被阅读0次

    先上关键词,方便大家搜索

    • uniapp自定义tabbar,中间凸起(微信小程序)
    • vue3 vite tabBar uniapp
    • 微信小程序自定义Tabbar(uniapp)

    先配置page.json,这里配置了两套Tabbar,一个给微信小程序使用,一个给别的平台使用

    // #ifdef MP-WEIXIN
        "tabBar": {
            "selectedColor": "#47A1FF",
            "custom": true,
            "list": [{
                    "pagePath": "pages/index/index",
                    "text": "抢单大厅",
                    "iconPath": "/static/index-light.png",
                    "selectedIconPath": "/static/index.png"
                },
                {
                    "pagePath": "pages/worker/worker",
                    "text": "工作台",
                    "iconPath": "/static/menu.png",
                    "selectedIconPath": "/static/menu.png"
                },
                {
                    "pagePath": "pages/mine/mine",
                    "text": "我的",
                    "iconPath": "/static/mine-light.png",
                    "selectedIconPath": "/static/mine.png"
    
                }
            ]
        },
        //  #endif
        // #ifndef MP-WEIXIN
        "tabBar": {
            "selectedColor": "#47A1FF",
            "backgroundColor": "#fff",
            "midButton": {
                "pagePath": "pages/worker/worker",
                "text": "工作台",
                "iconPath": "/static/menu.png",
                "selectedIconPath": "/static/menu.png"
            },
            "list": [{
                    "pagePath": "pages/index/index",
                    "text": "抢单大厅",
                    "iconPath": "/static/index-light.png",
                    "selectedIconPath": "/static/index.png"
                },
                {
                    "pagePath": "pages/worker/worker",
                    "text": "工作台",
                    "iconPath": "/static/menu.png",
                    "selectedIconPath": "/static/menu.png"
                },
                {
                    "pagePath": "pages/mine/mine",
                    "text": "我的",
                    "iconPath": "/static/mine-light.png",
                    "selectedIconPath": "/static/mine.png"
    
                }
            ]
        },
        //  #endif
    

    在微信小程序的官方文档中找到微信的自定义Tabbar示例,代码在文档里最下方

    • 直接点击在开发者工具中预览效果就可以打开微信开发者工具了
      小程序开发文档
    • 将示例中的组件原封不动复制到项目根目录下,打包的时候会自己打进去


      如图所示
    • 将移过去的组件内容改成自己的,js中list 的内容就是在page.json中配置的tabbar的内容了,这样组件已经可以显示了

    注意以下问题

    • 点击切换时已经可以出效果了,但是菜单的选中状态需要点两次才能正常选中
    • 在vue2中我们能使用生命周期解决这个问题,在vue3中我们也能使用生命周期,不过需要引入
    • 代码如下所示,条件编译只在微信小程序生效
    // #ifdef MP-WEIXIN 
    import  {onShow}  from "@dcloudio/uni-app"
    onShow(()=>{
        const curPages = getCurrentPages()[0];  // 获取当前页面实例
        if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {  
            curPages.getTabBar().setData({  
                selected: 2   // 表示当前菜单的索引,该值在不同的页面表示不同
            });  
        }
    })
    // #endif
    
    • 在每个使用tabbar 的页面都要添加该配置哦
    • vue2的自己百度,能搜到很多解决方法

    相关文章

      网友评论

        本文标题:uniapp微信小程序Vue3解决自定义tabbar的问题

        本文链接:https://www.haomeiwen.com/subject/luvjrdtx.html