亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解微信小程序設(shè)置底部導(dǎo)航欄目方法

 更新時間:2017年06月29日 10:24:26   投稿:lqh  
這篇文章主要介紹了詳解微信小程序設(shè)置底部導(dǎo)航欄目方法的相關(guān)資料,需要的朋友可以參考下

詳解微信小程序設(shè)置底部導(dǎo)航欄目方法

小程序底部想要有一個漂亮的導(dǎo)航欄目,不知道怎么制作,于是百度找到了本篇文章,分享給大家。

好了 小程序的頭部標(biāo)題 設(shè)置好了,我們來說說底部導(dǎo)航欄是如何實現(xiàn)的。

我們先來看個效果圖

這里,我們添加了三個導(dǎo)航圖標(biāo),因為我們有三個頁面,小程序最多能加5個。

那他們是怎么出現(xiàn)怎么著色的呢?兩步就搞定!

1. 圖標(biāo)準(zhǔn)備

阿里圖標(biāo)庫  http://www.iconfont.cn/collections/show/29

我們進入該網(wǎng)站,鼠標(biāo)滑到一個喜歡的圖標(biāo)上面  點擊下方的 下載按鈕

在彈出框中 選擇了 倆個不同顏色的 圖標(biāo)  選擇64px大小即可,我選擇的是png  然后下載下來 起上別名

將上述起好名字的圖標(biāo) 保存到 小程序 項目目錄中 新創(chuàng)建的 images 文件夾中,準(zhǔn)備工作就做好了

 

2. 更改配置文件

我們找到項目根目錄中的配置文件 app.json 加入如下配置信息

"tabBar": { 
  "color": "#a9b7b7", 
  "selectedColor": "#11cd6e", 
  "borderStyle":"white", 
  "list": [{ 
   "selectedIconPath": "images/111.png", 
   "iconPath": "images/11.png", 
   "pagePath": "pages/index/index", 
   "text": "首頁" 
  }, { 
   "selectedIconPath": "images/221.png", 
   "iconPath": "images/22.png", 
   "pagePath": "pages/logs/logs", 
   "text": "日志" 
  }, { 
   "selectedIconPath": "images/331.png", 
   "iconPath": "images/33.png", 
   "pagePath": "pages/test/test", 
   "text": "開心測試" 
  }] 
 }, 

解釋一下 對應(yīng)的屬性信息

tabBar 指底部的 導(dǎo)航配置屬性

color 未選擇時 底部導(dǎo)航文字的顏色

selectedColor 選擇時 底部導(dǎo)航文字的顏色

borderStyle 底部導(dǎo)航邊框的樣色(注意 這里如果沒有寫入樣式 會導(dǎo)致 導(dǎo)航框上邊框會出現(xiàn)默認的淺灰色線條)

list  導(dǎo)航配置數(shù)組

selectedIconPath 選中時 圖標(biāo)路徑

iconPath 未選擇時 圖標(biāo)路徑

pagePath 頁面訪問地址

text 導(dǎo)航圖標(biāo)下方文字

感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!

相關(guān)文章

最新評論