微信小程序自定义tabbar问题怎么解决(tabbar,微信小程序,开发技术)

1、首先按照官方组件在app.json中定义tabbar

"tabBar":{"custom":true,"backgroundColor":"#FFFFFF","borderStyle":"white","list":[{"pagePath":"pages/index/index","text":"首页","iconPath":"./images/home.png","selectedIconPath":"./images/home.png"},{"pagePath":"pages/me/me","text":"个人中心","iconPath":"./images/me.png","selectedIconPath":"./images/me.png"}]},"usingComponents":{}

2、在项目根目录创建自定义tabbar组件

划重点：根目录，请看下图，不放根目录会导致this.getTabBar = null

3、组件内容如下：

• custom-tab-bar/index.js

Component({data:{selected:0,color:"#7A7E83",selectedColor:"#3cc51f",list:[{pagePath:"../../pages/index/index",iconPath:"../images/home.png",selectedIconPath:"../images/home.png",text:"首页"},{pagePath:"../../pages/me/me",iconPath:"../images/me.png",selectedIconPath:"../images/me.png",text:"个人中心"}]},attached(){},methods:{switchTab(e){constdata=e.currentTarget.datasetconsturl=data.pathwx.switchTab({url})this.setData({selected:data.index})}}})

• custom-tab-bar/index.json

{"component":true}

• custom-tab-bar/index.wxml

<cover-viewclass="tab-bar"><cover-viewclass="tab-bar-border"></cover-view><cover-viewwx:for="{{list}}"wx:key="index"class="tab-bar-item"data-path="{{item.pagePath}}"data-index="{{index}}"bindtap="switchTab"><cover-imagesrc="{{selected===index?item.selectedIconPath:item.iconPath}}"></cover-image><cover-view>{{item.text}}</cover-view></cover-view></cover-view>

• custom-tab-bar/index.wxss

.tab-bar{position:fixed;bottom:0;left:0;right:0;height:48px;background:white;display:flex;padding-bottom:env(safe-area-inset-bottom);}.tab-bar-border{background-color:rgba(0,0,0,0.33);position:absolute;left:0;top:0;width:100%;height:1px;transform:scaleY(0.5);}.tab-bar-item{flex:1;text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;}.tab-bar-itemcover-image{width:27px;height:27px;}.tab-bar-itemcover-view{font-size:10px;}

4、在pages下的各个页面组件引入tabbar

以首页举例：

• pages/index.json

{"usingComponents":{"custom-tab-bar":"../../custom-tab-bar/index"}}

• pages/index.js

Page({onShow:function(){if(typeofthis.getTabBar==='function'&&this.getTabBar()){this.getTabBar().setData({selected:0})}}})

• pages/index.wxml

<viewclass="container"><custom-tab-bar></custom-tab-bar></view>