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

Posted 2020-12-15 gdragon

效果图

底部导航的切换效果，首页和我的页面切换的时候走在底部导航，而分类和购物车页面切换会跳转新页面。如果使用【微信原生的底部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相关知识点。