1.选中要创建tabbar组件的目录，右键选定新建Componen
2.然后编写wxml代码和wxss样式
<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}}" bindtap="switchTab">
<block wx:if="{{index === 1}}">
<cover-view class="pub">{{item.text}}</cover-view>
</block>
<block wx:else>
<cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
</block>
</cover-view>
</cover-view>这里注意：
<cover-view></cover-view> <cover-image></cover-image> 这两个组件都表示最上层显示，避免被其他组件覆盖。 <block></block>这个组件只是将其他组件框住，并不会被页面渲染。
查看代码
/* component/tabbar/tabbar.wxss */
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 48px;
background: white;
display: flex;
padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar-border {
background-color: rgba(0, 0, 0, 0.33);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
transform: scaleY(0.5);
}
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tab-bar-item cover-image {
width: 27px;
height: 27px;
}
.tab-bar-item cover-view {
font-size: 10px;
}
.pub{
background-color:dodgerblue ;
height: 80rpx;
width: 80rpx;
border-radius: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}查看代码
// component/tabbar/tabbar.js
var app = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
selected: {
// 默认选中list[0]页面
type:Number,
value:0
},
},
/**
* 组件的初始数据
*/
data: {
color: "#7A7E83", //默认颜色
selectedColor: "#FF3030", // 被选中后的颜色
list: [{
pagePath: "/pages/index/index", // 页面路径
iconPath: "../../static/images/tab/icon_component.png", // 图标路径
selectedIconPath: "../../static/images/tab/icon_component_HL.png", // 被选中后的图片路径
text: "首页"
},
{
text: "发布"
},
{
pagePath: "/pages/home/home",
iconPath: "../../static/images/tab/icon_API.png",
selectedIconPath: "../../static/images/tab/icon_API_HL.png",
text: "我的"
}]
},
/**
* 组件的方法列表
*/
// 前端所需要调用函数，必须得在methods编写
methods: {
switchTab(e) {
var data = e.currentTarget.dataset
console.log(data);
var url = data.path;
if (url) {
wx.switchTab({
url: url
})
} else {
if (app.globalData.userInfo) {
wx.navigateTo({
url: '/pages/publish/publish',
})
} else {
wx.navigateTo({
url: '/pages/auth/auth',
})
}
}
}
}
});
注意:
wx.switchTab(): 只能跳转到 tabbar页面。 wx.navigateTo(): 只能跳转到 非tabbar页面。 3.其他页面，想要作为tabbar页面，需要在自己的json文件中配置，在wxml中调用。 自定义一个组件：并且写上路径。{
"usingComponents": {
"tabbar":"/component/tabbar/tabbar"
}
}<tabbar selected="{{2}}"></tabbar>
5.需要在全局的app.json中定义：
"tabBar": {
"custom": true,
}
6.小提示：
虽然自定义的tabbar，优先度是高过app.json的。
但并不代表，app.json中的就代码不执行了。
如果你是按照上述方法，自己定义的tabbar，却还是发生了无法跳转tabbar页面的情况。
那就有可能是你所自定义的微信跳转的方法，与app.json中的tabBar：{list:[]} 的某一项发生了冲突，可以尝试删掉那一段试试。
比如：
你自定义的跳转方法使用的是wx.navigateTo()到A页面，
而你却在app.json中的tabBar：{list:[]}中配置了A页面的路径。
这样就会因为wx.navigateTo()只能跳转到非tabbar页面发生了冲突，从而产生不能跳转的缘故。
只要将A页面中的那一段字典，全部删掉即可。
标签：tabbar,自定义,微信,..,tab,跳转,组件,页面 From： https://www.cnblogs.com/yeli-oneselfblogs/p/17091335.html