微信小程序tabBar設置實例解析

發布時間: 2019-11-14 14:28:57 來源: 互聯網 欄目: JavaScript 點擊:

這篇文章主要介紹了微信小程序tabBar設置實例解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

這篇文章主要介紹了微信小程序tabBar設置實例解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

我們先來看一份圖,這個設置在官方文檔中已經寫得很清楚了,我只是做一個總結

注:我寫注釋是為了方便說明,在小程序中的json文件中是不能用注釋的

這個tabBar屬于全局屬性,因此就在全局配置文件app.json中配置

1.tabBar的配置

"color": "#8a8a8a",
  "selectedColor": "#f40",//選中的顏色
  "backgroundColor": "#ffffff",//背景色
  "borderStyle": "black",//邊界線的顏色
  "position":"top",//位置,是在上邊。還是選擇在下邊,如果選擇top,就不會顯示圖標
  "list": [//組件的清單
   {
    "pagePath": "page/component/index",//頁面路徑
    "text": "組件",//組件上顯示的文字 
    "iconPath": "img/compont_un.png",//默認圖標
    "selectedIconPath": "img/compont_on.png"http://選中后的圖標
   },
   {
    "pagePath": "page/API/index",
    "text": "API",
    "iconPath": "img/API_un.png",
    "selectedIconPath": "img/API_on.png"
   },
   {
    "pagePath": "page/persion/index",
    "text": "我的",
    "iconPath": "img/我的_un.png",
    "selectedIconPath": "img/我的_on.png"
   },
   {
    "pagePath": "pages/logs/logs",
    "text": "日志",
    "iconPath": "img/日志.png",
    "selectedIconPath": "img/日志_on.png"
   }
  ]
 },

最后再加一張圖,如果你設置了在頂部顯示,效果如下:

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持我們。

本文標題: 微信小程序tabBar設置實例解析
本文地址: http://www.leskzw.tw/wangluo/javascript/286362.html

如果認為本文對您有所幫助請贊助本站

支付寶掃一掃贊助微信掃一掃贊助

  • 支付寶掃一掃贊助
  • 微信掃一掃贊助
  • 支付寶先領紅包再贊助
    聲明:凡注明"本站原創"的所有文字圖片等資料,版權均屬編程客棧所有,歡迎轉載,但務請注明出處。
    在vue中利用v-html按分號將文本換行的例子淺析Vue 防抖與節流的使用
    Top 广东好彩1中奖规则