微信小程序實戰開發三:小程序之全局配置APP.JSON之底部菜單欄tabBar

編輯:睿兒發表于:2020-08-29 13:33:34 10 次閱讀
原創聲明:本內容(微信小程序實戰開發三:小程序之全局配置APP.JSON之底部菜單欄tabBar)為睿兒網絡原創作品,任何媒體、網站或個人未經本網協議授權不得轉載、鏈接、轉貼或以其他方式復制發布/發表。如需轉載請聯系站長QQ:7280374 請注明申請文章轉載!

小程序全局配置里面自帶的底部菜單配置,具體介紹如下:

全局配置官方說明文檔地址:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar



image.png

這個功能可以讓用戶自定義底部菜單 ,可以單獨文字,或者文字配圖標兩種方式。通過tabBar的配置文件來實現。


image.png


通過說明我們可以看到用戶可以自定義關于底部菜單的一些屬性,包括 文字顏色 邊框顏色位置等。還可以設置自定義菜單(以后用到的時候再講)

這里面最重要的就是LIST這個參數。

image.png

從說明中我們可以看出來 LIST為至少是2個最多5個的數組,數組元素必須包含 pagPath和text兩個參數。同時還可以選填 iconpath和selectedIconPath這兩項。

介紹很明確,使用也很簡單,直接上代碼吧。


在 全局文件app.json中,我們來訂單 tabBar

代碼如下:

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath":"pages/images/index.png",
        "selectedIconPath":"pages/images/index_active.png"
      },
      {
        "pagePath": "pages/paimai/paimai",
        "text": "拍賣",
        "iconPath":"pages/images/paimai.png",
        "selectedIconPath":"pages/images/paimai_active.png"
      },
      {
        "pagePath": "pages/zhibo/zhibo",
        "text": "直播",
        "iconPath":"pages/images/zhibo.png",
        "selectedIconPath":"pages/images/zhibo_active.png"
      },
      {
        "pagePath": "pages/paipingupload/paipingupload",
        "text": "拍品征集",
        "iconPath":"pages/images/paiping.png",
        "selectedIconPath":"pages/images/paiping_active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath":"pages/images/my.png",
        "selectedIconPath":"pages/images/my_active.png"
      }
    ]
  },

我們定義了5個頁面,并給它們都配了圖。。效果如下:

image.png

在小程序開發工具中預覽效果不太好看,但手機打開的時候效果就好了,不用介意。

通過使用全局變量的tabBar參數,我們成功定義了底部菜單。這一章很容易理解沒什么可以再講的了。自已實驗一下就全明白了。


原文地址:http://www.htzgsd.com/library/202008/29.html(張家口導航-睿兒知識庫)

張家口睿兒網絡科技有限公司版權所有
亚洲AV片不卡无码