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
页面效果:
记得每个子页面都要改!!! 文章来源:https://www.toymoban.com/news/detail-630136.html
完成了。文章来源地址https://www.toymoban.com/news/detail-630136.html
到了这里,关于小程序自定义tabBar+Vant weapp的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!