第一种不封装自定义tabbar,需要的页面tabbar
需要的步骤
第一步,pages.json需要
"tabBar": {
"custom": true,//自定义
"color": "#666666",
"selectedColor": "#DF5458",
"list": [{
"pagePath": "pages/index1"
},
{
"pagePath": "pages/index2"
},
{
"pagePath": "pages/index3"
},
{
"pagePath": "pages/index4"
}
]
},
第二步对应的页面
第二种封装的tabbar
引入组件,注册组件,给组件传当前页面数
组件
export default {
props: {
val: {
type: Number,
default: 0
}
},
data() {
return {
list: [{
path: "pages/index1"
},
{
path: "pages/index2"
},
{
path: "pages/index3"
},
{
path: 'pages/index4'
},
]
};
},
methods: {
change1(e) {
uni.switchTab({
url: '/' + this.list[e].path,
})
},
}
}
就这两种
或
export default {
props: {
val: {
type: Number,
default: 0
}
},
// options: {
// styleIsolation: 'shared'
// },
created() {
const info = uni.getSystemInfoSync()
const scale = 750 / info.windowWidth;
this.height = 156 / scale
},
data() {
return {
height: '',
value4: 0,
list: [{
path: "pages/index1"
},
{
path: "pages/classify/classify"
},
{
path: "pages/shop/index"
},
{
path: "pages/shopping/shopping"
},
{
path: 'pages/index/index'
},
]
}
},
// props: {
// current: Number,
// },
onLoad() {},
onShow() {
},
methods: {
tabbarChange(e) {
if (e == 2) {
uni.scanCode({
scanType: ["qrCode"],
success(e) {
uni.reLaunch({
url: "/packageA/pages/index?q=" + encodeURIComponent(e.result)
})
}
})
} else {
uni.switchTab({
url: '/' + this.list[e].path,
})
}
}
}
}
.icon {
width: 50rpx;
height: 50rpx;
}
.icon2 {
width: 156rpx;
height: 156rpx;
}
.tab {
height: 156rpx;
background-image: url(@/static/image/farem55.png);
background-repeat: no-repeat;
background-size: 750rpx;
background-position: top center;
display: flex;
width: 100%;
}
::v-deep.u-tabbar-item__text {
font-size: 10px !important;
}
export default {
props: {
val: {
type: Number,
default: 0
}
},
created() {
const info = uni.getSystemInfoSync()
const scale = 750 / info.windowWidth;
this.height = 156 / scale
},
data() {
return {
height: '',
value4: 0,
list: [{
path: "pages/index1"
},
{
path: "pages/classify/classify"
},
{
path: "pages/shop/index"
},
{
path: "pages/shopping/shopping"
},
{
path: 'pages/index/index'
},
]
}
},
onLoad() {},
onShow() {
},
methods: {
tabbarChange(e) {
if (e == 2) {
uni.scanCode({
scanType: ["qrCode"],
success(e) {
uni.reLaunch({
url: "/packageA/pages/index?q=" + encodeURIComponent(e.result)
})
}
})
} else {
uni.switchTab({
url: '/' + this.list[e].path,
})
}
}
}
}
.icon {
width: 50rpx;
height: 50rpx;
}
.icon2 {
width: 156rpx;
height: 156rpx;
}
.tab {
height: 156rpx;
background-image: url(@/static/image/farem55.png);
background-repeat: no-repeat;
background-size: 750rpx;
background-position: top center;
display: flex;
width: 100%;
}
::v-deep.u-tabbar-item__text {
font-size: 10px !important;
}
引入组件的页面样式加入
要不然不透
还有就是tabbar不定高度,就按照自己高度定
如果定了高度就按照