微信小程序自定义tabBar（实操）

文章目录

一、前言
二、固定效果图实现步骤
- 实现步骤
- 完整代码-矢量图
- - images图片
  - app.json代码
三、自定义效果图实现步骤
- 实现步骤
- 完整代码-矢量图
- - images图片
  - app.json代码
  - custom-tab-bar下的代码
  - 使用自定义TaBar

一、前言

一般使用tabBar的样式，固定不能改变。如下固定效果图：

如何自定义自己想要的效果图呢，举个例子。如下自定义效果图：

二、固定效果图实现步骤

使用微信开发者工具-创建项目我就不说了，官方文档很详细。
参考：官方文档介绍

实现步骤

1、添加images文件，添加想要的矢量图（可通过阿里巴巴矢量图免费获取）
2、在app.json文件中，编辑代码
3、保存，刷新即可

完整代码-矢量图

images图片

app.json代码

{"pages":["pages/index/index","pages/logs/index","pages/commdt/index","pages/cart/index","pages/mymessage/index"],"window":{"backgroundTextStyle":"light","navigationBarTitleText": "测试tabbar","navigationBarTextStyle":"white"},"tabBar": {"color": "#B6B6B6","selectedColor": "#FE9132","list": [{"pagePath":"pages/index/index","text": "首页","iconPath":"/images/sy2.png","selectedIconPath": "/images/sy1.png"},{"pagePath":"pages/commdt/index","text": "商品","iconPath":"/images/sp2.png","selectedIconPath": "/images/sp1.png"},{"pagePath":"pages/cart/index","text": "购物车","iconPath":"/images/gwc2.png","selectedIconPath": "/images/gwc1.png"},{"pagePath":"pages/mymessage/index","text": "我的","iconPath":"/images/wd2.png","selectedIconPath": "/images/wd1.png"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

三、自定义效果图实现步骤

实现步骤

1、添加images文件，添加想要的矢量图（可通过阿里巴巴矢量图免费获取）
2、在app.json文件中，编辑代码
3、点击加号，在根目录新建一个custom-tab-bar文件夹
4、然后右键该文件夹，点击新建components，输入index，回车，就会自动创建四个文件
此时我们可以看到小程序底部出现，就代表创建成功了。因为他自动识别了tabBar页面。
然后在该目录下编写代码即可

完整代码-矢量图

images图片

app.json代码

 "window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#FFFFFF","navigationBarTitleText": "摆烂鸭","navigationBarTextStyle":"black"},"tabBar":{"custom": true,"list":[{"pagePath":"pages/index/index","text":"摆鸭"},{"pagePath":"pages/commdt/index","text":"不鸭"}]},

custom-tab-bar下的代码

index.wxml

<cover-view class="tab-bar"><!-- <cover-view class="tab-bar-border"></cover-view> --><cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"><cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image><!-- <cover-view class="{{currentName ==  item.name ? 'text-active' : 'tabbar-text'}}">{{item.text}}</cover-view> --></cover-view>
</cover-view>

index.css

.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;height: 130rpx;background: white;display: flex;padding-bottom: env(safe-area-inset-bottom);justify-content: center;
}.tab-bar-item {text-align: center;display: flex;flex-direction: column;
}.tab-bar-item cover-image {width: 240rpx;height: 100rpx;
}.tab-bar-item cover-view {font-size: 10px;
}

index.js

Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {selected: 0,color: "#7A7E83",selectedColor: "#3cc51f",list: [{"pagePath": "/pages/index/index","iconPath": "/images/by3.png","selectedIconPath": "/images/by1.png","text": "摆鸭"}, {"pagePath": "/pages/commdt/index","iconPath": "/images/by2.png","selectedIconPath": "/images/by4.png","text": "不鸭"}]},/*** 组件的方法列表*/methods: {switchTab(e) {console.log("执行跳转", e);const data = e.currentTarget.datasetconst url = data.pathwx.switchTab({url})this.setData({selected: data.index})}}
})

使用自定义TaBar

使用自定义TabBar，在切换的TabBar界面的onShow中添加如下代码。如首页中设置 selected: 0，我的中设置 selected: 2。因为 selected: 1 是特殊跳转，点击加号图标时，不再是切换tabbar，而是直接跳转发布界面了。
例如：
/pages/index/index 的.js页面添加代码

  /*** 生命周期函数--监听页面显示*/onShow() {if (typeof this.getTabBar === 'function' &&this.getTabBar()) {this.getTabBar().setData({//唯一标识（其它设置不同的整数）  selected: 0})}},

/pages/commdt/index 的.js页面添加代码

  /*** 生命周期函数--监听页面显示*/onShow() {if (typeof this.getTabBar === 'function' &&this.getTabBar()) {this.getTabBar().setData({//唯一标识（其它设置不同的整数）  selected: 1})}},

各位看官》创作不易，点个赞！！！
诸君共勉：万事开头难，只愿肯放弃。

免责声明：本文章仅用于学习参考