当前位置：首页 > news >正文

小程序自定义tabBar+Vant weapp

news 2025/7/26 9:21:57

1.构建npm，安装Vant weapp：

1）根目录下，初始化生成依赖文件package.json

npm init -y

2）安装vant

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

3）修改 package.json 文件

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置（修改miniprogramNpmDistDir的路径）。

{..."setting": {..."packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./miniprogram/"}]}
}

***注意***：

由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为 ‘./’ 即可。

4）构建npm包：点击左上角工具--->构建npm--->显示构建完成

2. 测试引入和使用vant组件

1)引入：

// 通过 npm 安装的vant
// 在app.json

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

2）使用：

// 在wxml中：

<van-button type="primary">按钮</van-button>

3. 自定义tabBar配置：

1）在app.json 以下代码添加对应文件

{"pages": ["custom-tab-bar/index","pages/home/home","pages/topic/topic","pages/category/category","pages/cart/cart","pages/user/user"],
}

2）注意第1点生成的tabBar 代码文件custom-tab-bar是在根目录下的，生成了以下文件

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

3）在app.json配置tabBar信息

在 app.json 中的 tabBar 项指定 custom 字段为true，同时其余 tabBar 相关配置也补充完整。
所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。
这里的pagePath值前面没有“/”。

"tabBar": {"custom": true,"list": [{"pagePath": "pages/home/home","text": "首页"},{"pagePath": "pages/topic/topic","text": "专题"},{"pagePath": "pages/category/category","text": "分类"},{"pagePath": "pages/cart/cart","text": "购物车"},{"pagePath": "pages/user/user","text": "我的"}]},"usingComponents": {}

4) 配置active为活动的tab的索引，默认为0则显示首页，iconPath即为vant中的图标，text是文字，path对应路径值，记得前面有“/”。

// custom-tab-bar/index.js
Component({data: {active: 0,list: [{iconPath: "home-o",text: "首页",path: "/pages/home/home"},{iconPath: "label-o",text: "专题",path: "/pages/topic/topic"},{iconPath: "apps-o",text: "分类",path: "/pages/category/category"},{iconPath: "cart-o",text: "购物车",path: "/pages/cart/cart"},{iconPath: "user-o",text: "我的",path: "/pages/user/user"}]},methods: {onChange(event) {// event.detail 的值为当前选中项的索引wx.switchTab({url: this.data.list[event.detail].path});},}
})

5）引入组件

// custom-tab-bar/index.json

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

6）页面结构

// custom-tab-bar/index.wxml

<van-tabbar class="tab-bar" active="{{ active }}" bind:change="onChange" active-color="darkred" inactive-color="#333"><block wx:for="{{list}}" wx:key="index"><van-tabbar-item icon="{{item.iconPath}}">{{item.text}}</van-tabbar-item></block>
</van-tabbar>

7) 动态修改tab样式

在每个子页面修改active的值，来动态修改tabBar选中样式

例如在cart.js中active改为3，即在页面中显示的索引为3