效果图
底部导航的切换效果，首页和我的页面切换的时候走在底部导航，而分类和购物车页面切换会跳转新页面。如果使用【微信原生的底部tab】是没法实现这个效果的，这里使用了【Tabbar 标签栏】实现。
安装 vant-weapp
参考 【快速上手】
- 在项目根目录，使用
npm安装vant-weapp：
# 通过 npm 安装
npm i @vant/weapp -S --production
- 在微信开发者工具点击 工具 -> 构建
npm，并勾选 使用npm 模块选项，构建完成后，即可引入组件。 - 使用组件，·以
Button组件为例，只需要在app.json或具体页面的index.json中配置Button对应的路径即可
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
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相关知识点。