微信小程序[電商]-Tabbar 實現底部導航欄

效果圖

底部導航的切換效果，首頁和我的頁面切換的時候走在底部導航，而分類和購物車頁面切換會跳轉新頁面。如果使用【微信原生的底部tab】是沒法實現這個效果的，這裏使用了【Tabbar 標籤欄】實現。

安裝 vant-weapp

參考 【快速上手】

1. 在項目根目錄，使用 npm 安裝 vant-weapp：

# 通過 npm 安裝
npm i @vant/weapp -S --production

2. 在微信開發者工具點擊 工具 -> 構建 npm，並勾選 使用 npm 模塊 選項，構建完成後，即可引入組件。
3. 使用組件，·以 Button 組件爲例，只需要在app.json或具體頁面的 index.json中配置 Button 對應的路徑即可

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

Tabbar 使用

參考【Tabbar 標籤欄】

引入組件

可在app.json或頁面index.json中引入組件

"usingComponents": {
  "van-tabbar": "@vant/weapp/tabbar/index",
  "van-tabbar-item": "@vant/weapp/tabbar-item/index"
}

使用組件

在頁面index.wxml中使用組件

<van-tabbar active="{{ active }}" bind:change="onChange" custom-class="tabbar" safe-area-inset-bottom="{{ false }}" border="{{false}}">
	<van-tabbar-item icon="home-o">首頁</van-tabbar-item>
	<van-tabbar-item icon="orders-o">分類</van-tabbar-item>
	<van-tabbar-item icon="shopping-cart-o">購物車</van-tabbar-item>
	<van-tabbar-item icon="user-o">我的</van-tabbar-item>
</van-tabbar>

在頁面index.js中使用組件

Page({
  data: {
    active: 0,
  },
   onChange(event) {
    // event.detail 的值爲當前選中項的索引
    var index = event.detail

    if (index == 0) {
     // 首頁頁面標識
      that.data.active = 0
    } else if (index == 1) {
      // 分類，使用 navigateTo跳轉之後頁面左上角是返回按鈕
      wx.navigateTo({
        url: '../category/index',
      })

    } else if (index == 2) {
      // 購物車
      wx.navigateTo({
        url: '../shoping-cart/index',
      })

    } else if (index == 3) {
      // 我的頁面標識，使用 redirectTo 跳轉之後頁面左上角是回首頁的圖標
      that.data.active = 3
      wx.redirectTo({
        url: '../mine/mine',
      })
    }
    this.setData({
      active: that.data.active
    });
  },
});

通過以上操作基本實現底部tab的切換效果。

上車

佛系原創號主，主要分享 Flutter、微信小程序、Android相關知識點。