uni-app学习之旅tabBar

https://uniapp.dcloud.io/collocation/pages?id=tabbar自带参考文档

  

 

写在pages.json中，图片保存再static中

 "tabBar":{
        "color":"#F0AD4E",//未选中字体颜色
        "selectedColor":"#007AFF",//选中字体颜色
        "backgroundColor":"#DD524D",//tabbar背景颜色
        "borderStyle":"black",//上边框颜色
        "list":[
            {
              "text":"首页",//bar文本
              "pagePath":"pages/index/index",//导航路径
              "iconPath":"static/tabs/home.png",//未选中图片
              "selectedIconPath":"static/tabs/home-active.png"//已选中图片
            },
            {
              "text":"信息页",
              "pagePath":"pages/message/message",
              "iconPath":"static/tabs/message.png",
              "selectedIconPath":"static/tabs/message-active.png"
            },
            {
              "text":"我们",
              "pagePath":"pages/contact/contact",
              "iconPath":"static/tabs/contact.png",
              "selectedIconPath":"static/tabs/contact-active.png"
            }
        ]
    }

 

补充midbutton

list为偶数时生效

"midButton":{
            "width": "80px",
            "height": "70px",
            "text": "智能咨询",
            "iconPath": "static/consult.png",
            "iconWidth": "48px"
          
        },

 

onLaunch: function() {
            uni.onTabBarMidButtonTap(() => {
                        uni.navigateTo({
                            url: "/pages/consult/consult",
                            animationType: "slide-in-bottom",
                            animationDuration: 150
                        })
                    })

        },