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

一、概述

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

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

我們先來看個效果圖

 

 

 

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

那他們是怎么出現怎么着色的呢？兩步就搞定！

 

二、圖標准備

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

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

比如首頁，指定顏色代碼：#272636，選擇64px大小，下載png文件

 

其他圖標也是一樣的操作。

 

三、小程序開發

新建小程序 miniprogram-2

 

在項目根目錄創建images文件夾，將3個png文件放進去。

 

在pages文件夾下，創建2個目錄，分別是addressBook，sms。

打開微信開發者工具，鼠標移到addressBook文件夾，右鍵-->新建 Page，輸入名字：addressBook

它會生成4種不同后綴的文件，分別是js，json，wxml，wxss。

 

sms也是同樣的操作，創建4個文件。完成之后，整個項目目錄結構如下：

./
├── app.js
├── app.json
├── app.wxss
├── images
│   ├── home.png
│   ├── mail_list.png
│   └── short_message.png
├── pages
│   ├── addressBook
│   │   ├── addressBook.js
│   │   ├── addressBook.json
│   │   ├── addressBook.wxml
│   │   └── addressBook.wxss
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── logs
│   │   ├── logs.js
│   │   ├── logs.json
│   │   ├── logs.wxml
│   │   └── logs.wxss
│   └── sms
│       ├── sms.js
│       ├── sms.json
│       ├── sms.wxml
│       └── sms.wxss
├── project.config.json
├── sitemap.json
└── utils
    └── util.js

 

修改app.json，增加tabBar，pages增加跳轉頁面。

完整代碼如下：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/addressBook/addressBook",
    "pages/sms/sms"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#FFF"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "color": "#999",
        "selectedColor": "#3D98FF",
        "backgroundColor": "#fff",
        "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "images/home.png",
        "iconPath": "images/home.png",
        "pagePath": "pages/index/index",
        "text": "首頁"
      },
      {
        "selectedIconPath": "images/addressBook.png",
        "iconPath": "images/addressBook.png",
        "pagePath": "pages/addressBook/addressBook",
        "text": "通訊錄"
      },
      {
        "selectedIconPath": "images/sms.png",
        "iconPath": "images/sms.png",
        "pagePath": "pages/sms/sms",
        "text": "短信"
      }
    ]
  }
}

 

解釋一下 對應的屬性信息

 

tabBar  指底部的 導航配置屬性

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

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

backgroundColor 底部背景顏色

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

list   導航配置數組

selectedIconPath 選中時 圖標路徑

iconPath 未選擇時 圖標路徑

pagePath 頁面訪問地址

text  導航圖標下方文字

 

如果要改變更詳細的樣式 請參看

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar

 

修改app.wxss，設置背景顏色和文字。

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
page{ background: rgba(250,250,250,1);
  font-family:PingFangSC-Regular,PingFang SC;
}

 

修改 pages/addressBook/addressBook.wxml

<view>
  <text class="title">這是通訊錄</text>
</view>

 

 修改pages/sms/sms.wxml

<view>
  <text class="title">這是短信</text>
</view>

 

運行小程序，效果如下：

 

 

本文參考鏈接：

https://blog.csdn.net/weixin_43077063/article/details/82117190