微信小程序[电商]-Tabbar 实现底部导航栏

太过爱你忘了你带给我的痛 2023-02-23 03:56 74阅读 0赞

# 效果图 #

> 底部导航的切换效果，首页和我的页面切换的时候走在底部导航，而分类和购物车页面切换会跳转新页面。如果使用[【微信原生的底部tab】][tab]是没法实现这个效果的，这里使用了[【Tabbar 标签栏】][Tabbar]实现。

![在这里插入图片描述][20200705113158913.gif]

# 安装 vant-weapp #

> 参考 [【快速上手】][Link 1]

1.  在项目根目录，使用 `npm` 安装 `vant-weapp`：

# 通过 npm 安装
    npm i @vant/weapp -S --production

1.  在微信开发者工具点击 工具 -> 构建 `npm`，并勾选 使用 `npm 模块` 选项，构建完成后，即可引入组件。
2.  使用组件，·以 `Button` 组件为例，只需要在`app.json`或具体页面的 `index.json`中配置 `Button` 对应的路径即可

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

# Tabbar 使用 #

> 参考[【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相关知识点。  
> ![在这里插入图片描述][20200528213904480.jpg]

[tab]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar
[Tabbar]: https://youzan.github.io/vant-weapp/#/tabbar
[20200705113158913.gif]: https://img-blog.csdnimg.cn/20200705113158913.gif
[Link 1]: https://youzan.github.io/vant-weapp/#/quickstart
[20200528213904480.jpg]: https://img-blog.csdnimg.cn/20200528213904480.jpg