自定义tabbarhttps://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
<!--miniprogram/custom-tab-bar/index.wxml--> <cover-view class="tab-bar"> <cover-view class="tab-bar-border"></cover-view> <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"> <block wx:if="{{ index === 1 }}" > <cover-view class="pub">{{item.text}}</cover-view> </block> <block wx:else> <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image> <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view> </block> </cover-view> </cover-view>
.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-item cover-image { width: 27px; height: 27px; } .tab-bar-item cover-view { font-size: 10px; } .pub { background-color: #fa3d; height: 80rpx; width: 80rpx; border-radius: 50%; display: flex; flex-direction: row; justify-content: center; align-items: center; }
var app = getApp(); Component({ properties: { selected: { type: Number, // html选中找两个地方,一个data,一个属性 value: 0 } }, data: { color: "#7A7E83", // 颜色 selectedColor: "#FF0000", // 被选中颜色 list: [{ pagePath: "/pages/index/index", iconPath: "/static/tabbar/no.png", selectedIconPath: "/static//tabbar/yes.png", text: "首页" }, { text: "发布" }, { pagePath: "/pages/home/home", iconPath: "/static/tabbar/no.png", selectedIconPath: "/static/tabbar/yes.png", text: "我的" } ] }, attached() {}, methods: { switchTab(e) { var data = e.currentTarget.dataset // const常量 var url = data.path // 跳转非tababr // wx.navigateTo({ // url: url, // }) // 跳转tababr // 如果·有path if (url) { wx.switchTab({ url }) } else { if (app.globalData.userinfo) { wx.navigateTo({ url: '/pages/upload/upload', }) } else { wx.navigateTo({ url: '/pages/login/login', }) } } // this.setData({ // selected: data.index // }) } } })
"tabBar": { "selectedColor": "#FF0000", "custom": true, "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "/static/tabbar/no.png", "selectedIconPath": "/static//tabbar/yes.png" }, { "pagePath": "pages/home/home", "text": "我的", "iconPath": "/static/tabbar/no.png", "selectedIconPath": "/static/tabbar/yes.png" } ] },
{ "usingComponents": { "tabber": "/commponents/tabbar" } }
<!--选中的索引,根据tabbar中js配的菜单位置,自己调整--> <tabber selected="{{ 2 }}"></tabber>