用vant 自定义小程序tabBar

官方自定义的tabBar容易闪烁、并且tabBar页面需写成组件形式，不喜欢。

测试了下，用vant的效果比较好，记录下。

在app.json的同级界面下创建custom-tab-bar 文件夹包含 index.js index.json
定义app.json。
在tabBar的的页面下onShow生命周期加上，如果不加点击会错乱
```
 this.getTabBar().init();
```

custom-tab-bar.wxml

<van-tabbar active="{{ active }}" bind:change="onChange" active-color="#4859E5" inactive-color="#CDCDCD"><van-tabbar-item wx:for="{{ list }}" wx:key="index"><imageslot="icon"src="{{ item.normal }}"mode="aspectFit"style="width: 30px; height: 18px;"/><imageslot="icon-active"src="{{ item.active }}"mode="aspectFit"style="width: 30px; height: 18px;"/>{{item.text}}</van-tabbar-item>
</van-tabbar>

custom-tab-bar.js

const app = getApp()Component({data: {active: 0,list: [{url: "/pages/index/index/index",text: "首页",normal: "/utils/tabBarImg/index.png",active: "/utils/tabBarImg/index-active.png"}, {url: "/pages/exchange/exchange/exchange",text: "兑换",normal: "/utils/tabBarImg/exchange.png",active: "/utils/tabBarImg/exchange-active.png"}, {url: "/pages/mine/mine/mine",text: "我的",normal: "/utils/tabBarImg/mine.png",active: "/utils/tabBarImg/mine-active.png"}],},methods: {onChange(event) {this.setData({ active: event.detail });wx.switchTab({url: this.data.list[event.detail].url});},init() {const page = getCurrentPages().pop();this.setData({active: this.data.list.findIndex(item => item.url === `/${page.route}`)});}}
});

app.json

{"pages": ["pages/index/index/index","pages/logs/logs","custom-tab-bar/index","pages/mine/mine/mine","pages/exchange/exchange/exchange"],"usingComponents": {"van-tabbar": "@vant/weapp/tabbar/index","van-tabbar-item": "@vant/weapp/tabbar-item/index"},"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black","navigationStyle": "custom"},"sitemapLocation": "sitemap.json","lazyCodeLoading": "requiredComponents","useExtendedLib": {"weui": true},"tabBar": {"custom": true,"list": [{"pagePath": "pages/index/index/index","text": "首页"},{"pagePath": "pages/exchange/exchange/exchange","text": "兑换"},{"pagePath": "pages/mine/mine/mine","text": "我的","iconPath": "utils/tabBarImg/mine.png","selectedIconPath": "utils/tabBarImg/mine-active.png"}]}
}

用vant 自定义小程序tabBar相关推荐

用mpx框架自定义小程序底部tabbar
小程序[mpx] 用mpx框架自定义小程序底部tabbar 参考小程序官方文档:自定义 tabBar. 1.项目根目录下app.mpx** 1).添加"custom":" ...
自定义微信小程序tabBar，兼容iPhone异形全面屏
需求开发微信商城会员中心,tabBar有首页及用户中心,当用户没有登录时点击页面任意位置均弹出登录窗口.但是自带的微信tabBar无法被弹出的遮罩层覆盖,从而可以在两个tab之间切换. 解决自己手 ...
分享一个Vant Weapp小程序UI组件库
Vant Weapp官方地址:https://youzan.github.io/vant-weapp/#/ Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提 ...
Vant Weapp小程序蹲坑之事件名称问题及解决方案
Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用.值得褒奖的是,Vant Weapp 组件库更新非常迅速 ...
小程序tabBar底部如何实现？
小程序tabBar非常重要,起到快速导航的作用,以下我就把自己做tabBar的方法记录下来 "tabBar":{"list"[{"pagePath&q ...
WorkTool企微机器人APP分享自定义小程序
移动端应用怎么分享自定义小程序到企业微信前言什么是自定义小程序,就是我们可以通过业务逻辑或代码来动态修改每次发出的小程序所附带的路径(path)和参数(params),以此来控制每次发出的小程序都 ...
【微信小程序】微信小程序tabBar使用中不显示问题
微信小程序中tabBar配置微信小程序中下方的tabBar如何配置很多刚刚接触小程序的同学,有些懵.这里给你一个详细的配置文档: 小程序配置 | 微信开放文档具体配置代码如下: "tab ...
vant weapp 小程序获取用户信息授权
vant weapp 小程序获取用户信息授权 <template><div class="container"><van-button v-if=& ...
Vant Weapp小程序蹲坑之使用card组件显示价格
问题在基于mpvue+Vant Weapp组件库实战过程中,问题越来越多.网络上所谓的"坑"总结,仅仅不过是其开发中所遭所遇之"坑"而已--估计后面的&quo ...
微信自定义tabbar有小红点_自定义微信小程序tabBar组件上边框的颜色
背景: 在微信小程序的实际开发过程中,有时候我们需要修改微信小程序提供的 tabBar 组件顶部边框的颜色,以满足项目需求解决方案: 方式一: 通过tabBar组件自带的 borderStyle 属 ...

用vant 自定义小程序tabBar

用vant 自定义小程序tabBar相关推荐

最新文章

热门文章