文章目录
- 一、前言
- 二、固定效果图实现步骤
- 实现步骤
- 完整代码-矢量图
- 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.dataset
const url = data.path
wx.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
})
}
},
各位看官》创作不易，点个赞！！！
诸君共勉：万事开头难，只愿肯放弃。
免责声明：本文章仅用于学习参考
