|
@ -1,13 +1,13 @@ |
|
|
<template> |
|
|
<template> |
|
|
<view class="custom-tab-bar"> |
|
|
<view class="custom-tab-bar"> |
|
|
<view class="tab-item" v-for="(item,i) in tabBarList" :key="i" @click="switchTab(i)"> |
|
|
<view class="tab-item" v-for="(item,i) in tabBarList" :key="i" v-if="tabBarShowList[i]" @click="switchTab(i)"> |
|
|
<text :style="{ 'color': currentTab === i?item.selectColor:'#fff' }">{{ item.text }}</text> |
|
|
<text :style="{ 'color': currentTab === i?item.selectColor:'#fff' }">{{ item.text }}</text> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
export default { |
|
|
export default { |
|
|
props: { |
|
|
props: { |
|
|
currentTab: { |
|
|
currentTab: { |
|
|
type: Number, |
|
|
type: Number, |
|
@ -16,8 +16,7 @@ export default { |
|
|
}, |
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
tabBarList: [ |
|
|
tabBarList: [{ |
|
|
{ |
|
|
|
|
|
"pagePath": "pages/index/index", |
|
|
"pagePath": "pages/index/index", |
|
|
"selectColor": "#00FF00", |
|
|
"selectColor": "#00FF00", |
|
|
"text": "首页" |
|
|
"text": "首页" |
|
@ -42,13 +41,18 @@ export default { |
|
|
"selectColor": "#00FF00", |
|
|
"selectColor": "#00FF00", |
|
|
"text": "iSoul" |
|
|
"text": "iSoul" |
|
|
} |
|
|
} |
|
|
] |
|
|
], |
|
|
|
|
|
tabBarShowList: [] |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
onLoad() { |
|
|
onLoad() { |
|
|
this.getCurrentTab(); |
|
|
this.getCurrentTab(); |
|
|
}, |
|
|
}, |
|
|
|
|
|
mounted() { |
|
|
|
|
|
this.tabBarShowList = uni.getStorageSync('SHFlag').split(',').map(item => { |
|
|
|
|
|
return item.trim().toLowerCase() === 'true'; |
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
getCurrentTab() { |
|
|
getCurrentTab() { |
|
|
const pages = getCurrentPages(); |
|
|
const pages = getCurrentPages(); |
|
@ -67,11 +71,11 @@ export default { |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style scoped> |
|
|
<style scoped> |
|
|
.custom-tab-bar { |
|
|
.custom-tab-bar { |
|
|
position: fixed; |
|
|
position: fixed; |
|
|
bottom: 0; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
left: 0; |
|
@ -82,19 +86,19 @@ export default { |
|
|
height: 123rpx; |
|
|
height: 123rpx; |
|
|
z-index: 30; |
|
|
z-index: 30; |
|
|
background: #989898; |
|
|
background: #989898; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.tab-item { |
|
|
.tab-item { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
flex-shrink: 0; |
|
|
flex-shrink: 0; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.tab-item text { |
|
|
.tab-item text { |
|
|
font-size: 31rpx; |
|
|
font-size: 31rpx; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |