微信小程序設置底部導航欄目方法

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

好了 小程序的頭部標題 設置好了,我們來說說底部導航欄是如何實現的。

我們先來看個效果圖

這里,我們添加了三個導航圖標,因為我們有三個頁面,微信小程序最多能加5個。

那他們是怎么出現怎么著色的呢?兩步就搞定!

?

1. 圖標準備

阿里圖標庫 ?http://www.iconfont.cn/collections/show/29

我們進入該網站,鼠標滑到一個喜歡的圖標上面 ?點擊下方的 下載按鈕

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

將上述起好名字的圖標 保存到 小程序 項目目錄中 新創建的 images 文件夾中,準備工作就做好了

?

2. 更改配置文件

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

?

[html]?view plain?copy
  1. "tabBar":?{??
  2. ???"color":?"#a9b7b7",??
  3. ???"selectedColor":?"#11cd6e",??
  4. ???"borderStyle":"white",??
  5. ???"list":?[{??
  6. ?????"selectedIconPath":?"images/111.png",??
  7. ?????"iconPath":?"images/11.png",??
  8. ?????"pagePath":?"pages/index/index",??
  9. ?????"text":?"首頁"??
  10. ???},?{??
  11. ?????"selectedIconPath":?"images/221.png",??
  12. ?????"iconPath":?"images/22.png",??
  13. ?????"pagePath":?"pages/logs/logs",??
  14. ?????"text":?"日志"??
  15. ???},?{??
  16. ?????"selectedIconPath":?"images/331.png",??
  17. ?????"iconPath":?"images/33.png",??
  18. ?????"pagePath":?"pages/test/test",??
  19. ?????"text":?"開心測試"??
  20. ???}]??
  21. ?},??


解釋一下 對應的屬性信息

tabBar??指底部的 導航配置屬性

color??未選擇時 底部導航文字的顏色

selectedColor??選擇時 底部導航文字的顏色

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

list?? 導航配置數組

selectedIconPath?選中時 圖標路徑

iconPath?未選擇時 圖標路徑

pagePath?頁面訪問地址

text??導航圖標下方文字

轉載于:https://www.cnblogs.com/iqiao/p/7778113.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/252997.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/252997.shtml
英文地址,請注明出處:http://en.pswp.cn/news/252997.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

HTTP協議(3)瀏覽器的使用之查看源碼

在做CTF的Web類題目時,推薦使用Firefox瀏覽器。下面介紹一些在解題過程中關于瀏覽器的常用技巧。首先就是查看源碼。在做Web題目時,經常需要查看網站源碼,有的flag直接就藏在源碼中,有些題目則是在源碼中給出提示和線索&#xff0…

Autofac IoC容器基本使用步驟【1】

原文:http://www.bkjia.com/Asp_Netjc/888119.html 【原文中有一個地方報錯,下面已修改】 一.基本步驟: 1.設計適合控制反轉(IoC)的應用程序 2.給應用程序Autofac 引用. 3.注冊組件. 4.創建一個Container以備后用. 5.從Container創建一個 lifetime scop…

I2C總線之(三)---以C語言理解IIC

為了加深對I2C總線的理解&#xff0c;用C語言模擬IIC總線&#xff0c;邊看源代碼邊讀波形&#xff1a; 如下圖所示的寫操作的時序圖&#xff1a; 讀時序的理解同理。對于時序不理解的朋友請參考“I2C總線之(二)---時序” 完整的程序如下&#xff1a; #include<reg51.h>…

結對編程總結

這個項目我和我的結對伙伴共花了兩個月時間&#xff0c;之所以選這個項目&#xff0c;因為我們之前都學習過Python&#xff0c;也做過類似的程序&#xff0c;相比較其他項目而言&#xff0c;這個項目更合適&#xff0c;也讓我們對詞頻統計方面的知識加深了了解。寫這個程序我們…

JavaScript初學者必看“new”

2019獨角獸企業重金招聘Python工程師標準>>> 譯者按: 本文簡單的介紹了new, 更多的是介紹原型(prototype)&#xff0c;值得一讀。 原文: JavaScript For Beginners: the ‘new’ operator 譯者: Fundebug 為了保證可讀性&#xff0c;本文采用意譯而非直譯。 <di…

libGDX-wiki發布

為方便大家學習和訪問&#xff0c;我將libgdx的wiki爬取到doku-wiki下&#xff0c;專門建立了以下地址。歡迎大家來共同完善。 http://wiki.v5ent.com 轉載于:https://www.cnblogs.com/mignet/p/ligbdx_wiki.html

I2C讀寫時序

1. I2C寫時序圖&#xff1a; 注意&#xff1a;最后一個byte后&#xff0c;結束標志在第十個CLK上升沿之后&#xff1a; 2. I2C讀時序圖&#xff1a; 注意&#xff1a;restart信號格式&#xff1b;讀操作結束前最后一組clk的最后一個上升沿&#xff0c;主機應發送NACK&#xff0…

網站性能優化

基本概念 1、網站吞吐量&#xff1a;TPS/每秒的事務數&#xff0c;QPS/每秒的查詢數&#xff0c;HPS/每秒的HTTP請求數 2、服務器性能指標&#xff1a;系統負載&#xff0c;內存使用&#xff0c;CPU使用&#xff0c;磁盤使用以及網絡I/O等 前端優化方法 1、減少HTTP請求&#x…

JAVA-容器(2)-Collection

&#xff08;基于JDK1.8源碼分析&#xff09; 一&#xff0c;Collection 所有實現Collection接口的類原則上應該提供兩種構造函數&#xff1a; 【1】無參構造-創建一個空的容器 【2】有參構造-創建一個新的Collection&#xff0c;這個新的Collection和傳入的Collection具有相同…

軟件測試工具LoadRunner中如何定義SLA?--轉載

軟件測試工具LoadRunner中如何定義SLA&#xff1f; 瀏覽&#xff1a;2242|更新&#xff1a;2017-04-09 22:50SLA 是您為負載測試場景定義的具體目標。Analysis 將這些目標與軟件測試工具LoadRunner在運行過程中收集和存儲的性能相關數據進行比較&#xff0c;然后確定目標的 SLA…

最近閱讀20171106

java面試題 線上服務內存OOM問題定位三板斧 JVM的GC ROOTS存在于那些地方 mysql innodb怎樣做查詢優化 ----未閱讀 JAVA CAS原理深度分析----未閱讀 轉載于:https://www.cnblogs.com/Tpf386/p/7793248.html

LinuxI2C驅動--從兩個訪問eeprom的例子開始

本小節介紹兩個在linux應用層訪問eeprom的方法&#xff0c;并給出示例代碼方便大家理解。第一個方法是通過sysfs文件系統對eeprom進行訪問&#xff0c;第二個方法是通過eeprom的設備文件進行訪問。這兩個方法分別對應了i2c設備驅動的兩個不同的實現&#xff0c;在后面的小結會詳…

Cookie詳解整理

1.Cookie的誕生 由于HTTP協議是無狀態的&#xff0c;而服務器端的業務必須是要有狀態的。Cookie誕生的最初目的是為了存儲web中的狀態信息&#xff0c;以方便服務器端使用。比如判斷用戶是否是第一次訪問網站。目前最新的規范是RFC 6265&#xff0c;它是一個由瀏覽器服務器共同…

驍龍820和KryoCPU:異構計算與定制計算的作用 【轉】

本文轉載自&#xff1a;https://www.douban.com/group/topic/89037625/ Qualcomm驍龍820處理器專為提供創新用戶體驗的頂級移動終端而設計。為實現消費者所期望的創新&#xff0c;移動處理器必須滿足日益增長的計算需求且降低功耗&#xff0c;同時還要擁有比以往更低的溫度&…

LNMP

準備工作 建立一個軟件包目錄存放 mkdir -p /usr/local/src/ 清理已經安裝包 rpm -e httpd rpm -e mysql rpm -e php yum -y remove httpd yum -y remove mysql yum -y remove php #搜索apache包 rpm -qa http* #強制卸載apache包 rpm -e --nodeps 查詢出來的文件名 #檢查是否卸…

算法復習——計算幾何基礎(zoj1081)

題目&#xff1a; Statement of the Problem Several drawing applications allow us to draw polygons and almost all of them allow us to fill them with some color. The task of filling a polygon reduces to knowing which points are inside it, so programmers have …

亞馬遜Rekognition發布針對人臉檢測、分析和識別功能的多項更新

今天亞馬遜Rekognition針對人臉檢測、分析和識別功能推出了一系列更新。這些更新將為用戶帶來多項能力的改今&#xff0c;包括從圖像中檢測出更多人臉、執行更高精度的人臉匹配以及獲得圖像中的人臉得到更準確的年齡、性別和情感屬性。Amazon Rekognition的客戶可以從今天開始使…

(轉)CentOS分區操作詳解

CentOS分區操作詳解 原文&#xff1a;http://blog.csdn.net/yonggeit/article/details/77924393 磁盤分區 分區格式的兩種選擇&#xff1a;MBR和GPT 分區命令&#xff1a; parted的操作都是實時生效的&#xff0c;小心使用&#xff0c;主要是用于大于2T硬盤&#xff0c;支持MBR…

linux驅動中地址空間轉換

在linux kernel 中&#xff0c;物理地址是不能直接使用的&#xff0c;必須通過轉換才可以。轉換分為兩種&#xff0c; 靜態和動態。 靜態就是下面那種&#xff0c;不過&#xff0c;靜態的地址轉換&#xff0c;還需要在kernel 初始化的時候作映射。 動態映射是使用 ioremap 函…