使用uniapp开发时自定义tabbar

预览图：

 一、配置page.jsong中的tabbar（这一步是必须的，因为我们在使用uni.switchTab()时必须要用到）

"tabBar": {"list": [{"pagePath": "pages/index/index","iconPath": "static/images/icon/home.png","selectedIconPath": "static/images/icon/home_select.png","text": "首页"}, {"pagePath": "pages/OldGoods/OldGoods","iconPath": "static/images/icon/home.png","selectedIconPath": "static/images/icon/home_select.png","text": "二手"},{"pagePath": "pages/list/list","iconPath": "","selectedIconPath": "","text": "权益"},{"pagePath": "pages/IntegralMall/IntegralMall","iconPath": "","selectedIconPath": "","text": "积分商城"},{"pagePath": "pages/me/me","iconPath": "static/images/icon/me.png","selectedIconPath": "static/images/icon/me_select.png","text": "我的"}]}

二、编写tabbar组件

view:

{{item.title}}

css:这里就省略了，我中间那个其实就是用一个元素把中间那个选项给遮挡住，点击时使用uni.switchTab()仅此而已

js:我这里使用props属性的方式传值，因为点击时要做页面状态的切换，

props:{pageindex:Number},name:"TabBar",data() {return {list:[{title:"首页",icon:"../../static/images/label/tab_sy_01.png",iconAction:"../../static/images/label/tab_sy_02.png",path:"/pages/index/index?id=0"},{title:"二手",icon:"../../static/images/label/tab_es_01.png",iconAction:"../../static/images/label/tab_es_02.png",path:"/pages/OldGoods/OldGoods"},{title:"权益",icon:"../../static/images/label/tab_qy_01.png",iconAction:"../../static/images/label/tab_qy_02.png",path:"/pages/list/list"},{title:"积分商城",icon:"../../static/images/label/tab_jf_01.png",iconAction:"../../static/images/label/tab_jf_02.png",path:"/pages/IntegralMall/IntegralMall"},{title:"我的",icon:"../../static/images/label/tab_wd_01.png",iconAction:"../../static/images/label/tab_wd_02.png",path:"/pages/me/me"}]};},

使用组件：

        import TabBar from "@/components/TabBar/TabBar.vue"    export default {components:{TabBar}    }