小程序開(kāi)發(fā)實(shí)戰(zhàn)案例之三 | 小程序底部導(dǎo)航欄如何設(shè)置

小程序中最常見(jiàn)的功能就是底部導(dǎo)航欄了，今天就來(lái)看一下怎么設(shè)置一個(gè)好看的導(dǎo)航欄～這里我們使用的是支付寶官方小程序 IDE 做示范。

官方提供的底部導(dǎo)航欄

第一步：頁(yè)面創(chuàng)建

一般的小程序會(huì)有四個(gè) tab，我們這次也是配置四個(gè) tab 的導(dǎo)航欄。

首先，我們先創(chuàng)建四個(gè)頁(yè)面：


tab 最多可以設(shè)置五個(gè)，參考 ?? [tabBar 能設(shè)置幾個(gè) tab]

第二步：在 app.json 中配置底部導(dǎo)航欄的信息

?? 底部導(dǎo)航欄需要在 app.json 文件中通過(guò) tabBar 屬性配置，其中：

  • textColor：設(shè)置文字顏色
  • selectedColor：設(shè)置選中文字顏色
  • backgroundColor：設(shè)置背景色
  • items：每個(gè) tab 配置
    • pagePath：對(duì)應(yīng) tab 頁(yè)面路徑
    • name：對(duì)應(yīng)顯示 tab 名稱(chēng)
    • icon：非選中狀態(tài)下圖標(biāo)路徑
    • activeIcon：選中狀態(tài)下圖圖標(biāo)路徑

app.json文件代碼

{
  "pages": [
    "pages/index/index",
    "pages/mine/mine",
    "pages/sort/sort",
    "pages/basket/basket"
  ],
  "window": {
    "defaultTitle": "購(gòu)物商城"
  },
  //底部導(dǎo)航欄的信息
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首頁(yè)"
      },
      {
        "pagePath": "pages/sort/sort",
        "name": "分類(lèi)"
      },
      {
        "pagePath": "pages/basket/basket",
        "name": "購(gòu)物車(chē)"
      },
      {
        "pagePath": "pages/mine/mine",
        "name": "我的"
      }
    ]
  }
}

實(shí)現(xiàn)效果

這里收集了一下導(dǎo)航欄的常見(jiàn)問(wèn)題，幫大家避坑：

第三步：美化導(dǎo)航欄

簡(jiǎn)單的 tab 功能實(shí)現(xiàn)后，我們可以通過(guò)圖標(biāo)（icon/activeIcon）、顏色等屬性對(duì)導(dǎo)航欄進(jìn)行下美化。

先配一個(gè)圖標(biāo)，圖標(biāo)大家可以自行搜索，記得找透明底色圖片（否則會(huì)有白底兒 ??）。

一個(gè) tab 需要配置圖標(biāo)的兩個(gè)狀態(tài)，即 選中狀態(tài) 和 非選中狀態(tài)，例如：

創(chuàng)建 images 文件夾，把圖片拖進(jìn)去：

稍微美化后的 tabBar 代碼：

 "tabBar": {
    "textColor": "#0e932e",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "icon": "images/index.png",
        "activeIcon": "images/index_t.png",
        "name": "首頁(yè)"
      },
      {
        "pagePath": "pages/sort/sort",
        "icon": "images/sort.png",
        "activeIcon": "images/sort_t.png",
        "name": "分類(lèi)"
      },
      {
        "pagePath": "pages/basket/basket",
        "icon": "images/basket.png",
        "activeIcon": "images/basket_t.png",
        "name": "購(gòu)物車(chē)"
      },
      {
        "pagePath": "pages/mine/mine",
        "icon": "images/mine.png",
        "activeIcon": "images/mine_t.png",
        "name": "我的"
      }
    ]
  }

實(shí)現(xiàn)效果

配置完上面信息之后一個(gè)簡(jiǎn)單的 tab 頁(yè)面就出來(lái)了，基本就可以滿(mǎn)足一般小程序的要求了。

tabBar 樣式配置的常見(jiàn)問(wèn)題給大家參考下：

第四步：導(dǎo)航欄進(jìn)階功能

如果對(duì)應(yīng)的頁(yè)面需要提示用戶(hù)進(jìn)行交互的話(huà)，我們就可以用到下面的功能，例如 tab 紅點(diǎn)提示、tab 文本提示 。

tab 紅點(diǎn)提示

通過(guò) my.showTabBarRedDot 方法給【我的】增加紅點(diǎn)提醒

//index.js
Page({
  onLoad(query) {
    my.showTabBarRedDot({
      index: 3,//左邊開(kāi)始，從0計(jì)數(shù)
      success: function(res) {
        console.log(res);    //{ "success": true}
      },
      fail: function(err) {
        console.log(err);
      }
    })
    console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
  },
})

實(shí)現(xiàn)效果

通過(guò) my.hideTabBarRedDot 方法在點(diǎn)擊【我的】時(shí)候隱藏紅點(diǎn)：

//mine.js
Page({
  onLoad() {
    my.hideTabBarRedDot({
      index: 3,//左邊開(kāi)始，從0計(jì)數(shù)
      success: function(res) {
        console.log(res);   //{ "success": true}
      },
      fail: function(err) {
        console.log(err);
      }
    });
  },
});

實(shí)現(xiàn)效果

tab 文本提示

通過(guò) my.setTabBarBadge 方法給【購(gòu)物車(chē)】增加數(shù)量

<!--index.axml -->
<button size="default" type="primary" onTap="addShop">加入購(gòu)物車(chē)</button>

//index.js
Page({
  addShop(){
    my.setTabBarBadge({
      index: 2,//左邊開(kāi)始，從0計(jì)數(shù)
      text: '8',//全部顯示只支持3個(gè)字符
      success(res) {
        console.log(res);
      },
      fail(res) {
        console.log('setTabBarBadge fail: ', res);
      }
    })
  }
});

實(shí)現(xiàn)效果

超過(guò) 3 個(gè)字符效果

如果需要移除文本的話(huà)，可以通過(guò) my.removeTabBarBadge 方法實(shí)現(xiàn)

//basket.js
Page({
  onLoad() {
    my.removeTabBarBadge({
      index: 2,//左邊開(kāi)始，從0計(jì)數(shù)
      success: function(res) {
        console.log(res);   // { "success": true}
      },
      fail: function(err) {
        console.log(err);
      }
    });
  },
});

實(shí)現(xiàn)效果

tabBar 切換的問(wèn)題大家可以參考：

自定義底部導(dǎo)航欄

如果想要設(shè)置更多能力的 tabBar 的話(huà)，可以使用自定義Tab來(lái)實(shí)現(xiàn)。
? 注意：

  • 使用自定義 tabBar 后，與 tabBar 樣式相關(guān)的接口都無(wú)法使用，例如設(shè)置紅點(diǎn)（my.showTabBarRedDot ）、修改樣式（my.setTabBarStyle）等。
  • 自定義 tabBar 相當(dāng)于是自定義了一個(gè)組件，可以通過(guò) getTabBar 獲取自定義 tabBar 實(shí)例進(jìn)行操作。

第一步：創(chuàng)建自定義 tabBar 目錄

添加自定義的 tabBar 文件，文件位置和名字要保持一致：


第二步：修改 app.json 文件

配置 app.json 文件，在 tabBar 下添加 customize 屬性，設(shè)置為 true

{
  "pages": [
    "pages/index/index",
    "pages/mine/mine",
    "pages/sort/sort",
    "pages/basket/basket",
    "pages/member/member"
  ],
  "window": {
    "defaultTitle": "購(gòu)物商城"
  },
  "tabBar": {
    "customize": true,
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首頁(yè)"
      },
      {
        "pagePath": "pages/sort/sort",
        "name": "分類(lèi)"
      },
       {
        "pagePath": "pages/member/member",
        "name": "會(huì)員"
      },
      {
        "pagePath": "pages/basket/basket",
        "name": "購(gòu)物車(chē)"
      },
      {
        "pagePath": "pages/mine/mine",
        "name": "我的"
      }
    ]
  }
}

第三步：編寫(xiě)自定義 tabBar 代碼

customize-tab-bar 文件下

index.axml 頁(yè)面：

<view class="tabbar_box">
  <view class="tabbar_nav {{index === 2 ? 'active' : ''}}" onTap="switchTab" data-index="{{index}}" data-item={{item}} a:for="{{tabBar.items}}" a:key="index">
    <!-- 圖標(biāo) -->
    <image class="tabbar_icon" src="{{selected === index ? item.activeIcon : item.icon}}"></image>
    <!-- 文字 -->
    <text style="color:{{selected === index ? tabBar.selectedColor : tabBar.textColor}}" >{{item.name}}</text>
  </view>
</view>

index.js 頁(yè)面：


Component({
  data: {
    selected: 0,
    tabBar: {
      textColor: "#0e932e",
      selectedColor: "#49a9ee",
      items: [
        {
          pagePath: "/pages/index/index",
          name: "首頁(yè)",
          icon: "/images/index.png",
          activeIcon: "/images/index_t.png",
        },
        {
          pagePath: "/pages/sort/sort",
          name: "分類(lèi)",
          icon: "/images/sort.png",
          activeIcon: "/images/sort_t.png",
        },
        {
          pagePath: "/pages/member/member",
          name: "",
          icon: "/images/member.png",
          activeIcon: "/images/member_t.png"
        },
        {
          pagePath: "/pages/basket/basket",
          name: "購(gòu)物車(chē)",
          icon: "/images/basket.png",
          activeIcon: "/images/basket_t.png",
        },
        {
          pagePath: "/pages/mine/mine",
          name: "我的",
          icon: "/images/mine.png",
          activeIcon: "/images/mine_t.png",
        }
      ]
    }
  },
  methods: {
    switchTab(e) {
      const {dataset: { item: { pagePath = '' }} = {}} = e.target
      my.switchTab({
        url: pagePath
      })
    }
  }
});

index.acss 頁(yè)面


.tabbar_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.2);
  background: #ffffff;
  padding-top: 16rpx;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: content-box;
}

.tabbar_nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 25rpx;
  height: 100%;
  flex: 1;
  background: #fff;
}

.tabbar_nav.active {
  padding-top: 50rpx;
}

.tabbar_nav.active image {
  width: 100rpx;
  z-index: 2;
  height: 100rpx;
  border-radius: 50%;
  line-height: 100rpx;
  font-size: 50rpx;
  top: -50rpx;
  left: 0;
  right: 0;
  margin: auto;
  padding: 0;
  position: absolute;
}

.tabbar_nav.active::after {
  content: "";
  position: absolute;
  width: 120rpx;
  height: 120rpx;
  top: -60rpx;
  left: 0;
  right: 0;
  margin: auto;
  box-shadow: 0 -3rpx 8rpx rgba(0, 0, 0, 0.06);
  border-radius: 60rpx;
  background-color: inherit;
  z-index: 0;
}

.tabbar_nav.active::before {
  content: "";
  position: absolute;
  width: 120rpx;
  height: 30rpx;
  bottom: 30rpx;
  left: 0;
  right: 0;
  margin: auto;
  background-color: inherit;
  z-index: 1;
}

.tabbar_icon {
  width: 40rpx;
  height: 40rpx;
}

.tabbar_nav text {
  font-size: 24rpx;
  margin-top: 6rpx;
}

pages/index 文件下

index.js 文件：

Page({
  // 頁(yè)面顯示
  onShow() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0,
      });
    }
  }
})

實(shí)現(xiàn)效果

以上就是關(guān)于小程序底部導(dǎo)航欄的所有內(nèi)容啦，希望對(duì)你有所幫助★,°:.☆(￣▽?zhuān)?/$:.°★ 。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容