基于mpvue+vant自定义微信小程序的tabbar组件
作者:互联网
首先附上微信小程序自定义tabbar开发文档地址:传送门
一直使用的都是微信原生的tabbar组件,这一次想给小程序加一个功能,实现首页弹窗轮播图全屏覆盖(弹窗遮罩层盖住小程序原生的头部和底部导航组件),小程序原生的底部tabbar组件默认层级是最高的,无法被其余组件和标签遮盖,要实现遮罩层盖住tabbar组件只能舍弃掉原生的tabbar,自定义一个tabbar了。
先看我的小程序的层级结构:
接下来是自定义tabbar组件的开发步骤:
- 在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。示例在官方文档中有,一样的图这边就不贴了。
- dist内创建custom-tab-bar文件夹和pages同级。这边就不参照官方文档了,不要把custom-tab-bar文件夹创建在src文件夹下和pages同级,也不要创建在项目根目录下,要把custom-tab-bar文件夹dist内自定义tabbar组件才能生效。
- 接着创建入口文件:
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss - index.wxss可参照示例代码,这边贴一下wxml,js和json代码。
//wxml
<van-tabbar active="{{ active }}" bind:change="onChange">
<van-tabbar-item wx:for="{{ list }}" wx:key="index" icon="{{active === index ? item.selectedIconPath : item.iconPath}}">
<text style="color: {{active === index ? selectedColor : color}}">{{item.text}}</text>
</van-tabbar-item>
</van-tabbar>
//js
Component({
data: {
active: '',
color: "#C2C6D0",
selectedColor: "#FFA065",
list: [{
"selectedIconPath": "/static/icon/icon_xcx_c_bar_home@3x.png",
"iconPath": "/static/icon/icon_xcx_c_bar_home_gray@3x.png",
"pagePath": "/pages/index/main",
"text": "首页"
},
{
"selectedIconPath": "/static/icon/icon_xcx_c_bar_store_color@3x.png",
"iconPath": "/static/icon/icon_xcx_c_bar_store_gary@3x.png",
"pagePath": "/pages/store-list/main",
"text": "找店"
},
{
"selectedIconPath": "/static/icon/icon_xcx_c_bar_mine_color@3x.png",
"iconPath": "/static/icon/icon_xcx_c_bar_mine_gary@3x.png",
"pagePath": "/pages/vip/main",
"text": "会员"
}
]
},
methods: {
onChange(e) {
wx.switchTab({
url: this.data.list[e.detail].pagePath
});
this.setData({
active: e.detail
});
}
}
});
//json
{
"component": true,
"usingComponents": {
"van-tabbar": "/static/vant/tabbar/index",
"van-tabbar-item": "/static/vant/tabbar-item/index"
}
}
- 在每一个tab页面通过 getTabBar 接口获取组件实例,并调用 setData 更新active值
onShow () {
this.$root.$mp.page.getTabBar().setData({
active: 0 //对应页面的index
})
}
- 到这里功能应该已经实现了,接下来就是打包发布了。但是此时有一个很致命的问题,因为一开始custom-tab-bar文件夹是创建在dist目录中,当我们进行打包时,会生成一个没有custom-tab-bar文件夹的dist目录,很不幸,刚刚好不容易写完的custom-tab-bar文件夹没了。。。这个问题暂时可以采取这种方式解决:
- 当我们在开发工具上调试的时候可以直接在dist目录中创建custom-tab-bar文件夹,但是如果这个功能需要上线,那么需要在src目录下,创建custom-tab-bar文件夹(需与pages文件夹同级)。
- 打开build文件夹下的webpack.base.conf.js,在plugins数组中添加新的插件:
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../src/custom-tab-bar'),
to: path.resolve(config.build.assetsRoot, './custom-tab-bar'),
ignore: ['.*']
}
])
这样打包之后,可以将src下的custom-tab-bar文件夹打包到dist目录下。
标签:index,bar,vant,自定义,tabbar,custom,tab,mpvue,icon 来源: https://blog.csdn.net/weixin_48566374/article/details/121054658