實現效果圖

?

代碼也很簡單

1 在項目的app.json 中配置

  "tabBar": {"color": "#6e6d6b","selectedColor": "#e64340","borderStyle": "white","backgroundColor": "#fff","box-shadow": "0 0 6px 0","list": [{"pagePath": "pages/basics/basics","text": "基礎","iconPath": "pages/images/a_unselect.png","selectedIconPath": "pages/images/a_select.png"},{"pagePath": "pages/media/media","text": "媒體","iconPath": "pages/images/b_unselect.png","selectedIconPath": "pages/images/b_select.png"}]}

?

別忘記在pages里面填寫路徑

如果想讓起在頂部可以設置:positon:top 代碼如下

"tabBar": {"color": "#6e6d6b","selectedColor": "#e64340","borderStyle": "white","backgroundColor": "#fff","box-shadow": "0 0 6px 0","position":"top","list": [{"pagePath": "pages/basics/basics","text": "基礎","iconPath": "pages/images/a_unselect.png","selectedIconPath": "pages/images/a_select.png"},{"pagePath": "pages/media/media","text": "媒體","iconPath": "pages/images/b_unselect.png","selectedIconPath": "pages/images/b_select.png"}]}

屬性的說明:

需要注意的tabBar 最多是5個,最少是2個,當tabBar位于頂部的時候,圖片就會失效,只能點擊切換不能滑動切換,

小紅點實現

  wx.showTabBarRedDot({index: 0,success:function(res){console.log("success",res)},fail:function(fail){console.log("fail",fail)},  complete:function(com){console.log("complete", com)}})

小紅點也只有tabBar位于底部的時候有,位于頂部的時候沒有

?

總結

以上是生活随笔為你收集整理的微信小程序tabBar的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。