效果图

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