2 changed files with 96 additions and 84 deletions
@ -1,100 +1,104 @@ |
|||||
<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, |
||||
default: 0 |
default: 0 |
||||
} |
} |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
tabBarList: [ |
tabBarList: [{ |
||||
{ |
"pagePath": "pages/index/index", |
||||
"pagePath": "pages/index/index", |
|
||||
"selectColor": "#00FF00", |
"selectColor": "#00FF00", |
||||
"text": "首页" |
"text": "首页" |
||||
}, |
}, |
||||
{ |
{ |
||||
"pagePath": "pages/index/readingBody", |
"pagePath": "pages/index/readingBody", |
||||
"selectColor": "#00FF00", |
"selectColor": "#00FF00", |
||||
"text": "阅读体" |
"text": "阅读体" |
||||
}, |
}, |
||||
{ |
{ |
||||
"pagePath": "pages/index/sensoryStore", |
"pagePath": "pages/index/sensoryStore", |
||||
"selectColor": "#00FF00", |
"selectColor": "#00FF00", |
||||
"text": "有感商店" |
"text": "有感商店" |
||||
}, |
}, |
||||
{ |
{ |
||||
"pagePath": "pages/index/intelligentAgent", |
"pagePath": "pages/index/intelligentAgent", |
||||
"selectColor": "#00FFFF", |
"selectColor": "#00FFFF", |
||||
"text": "智能体" |
"text": "智能体" |
||||
}, |
}, |
||||
{ |
{ |
||||
"pagePath": "pages/index/iSoul", |
"pagePath": "pages/index/iSoul", |
||||
"selectColor": "#00FF00", |
"selectColor": "#00FF00", |
||||
"text": "iSoul" |
"text": "iSoul" |
||||
} |
} |
||||
] |
], |
||||
|
tabBarShowList: [] |
||||
}; |
}; |
||||
}, |
}, |
||||
onLoad() { |
onLoad() { |
||||
this.getCurrentTab(); |
this.getCurrentTab(); |
||||
}, |
}, |
||||
methods: { |
mounted() { |
||||
getCurrentTab() { |
this.tabBarShowList = uni.getStorageSync('SHFlag').split(',').map(item => { |
||||
const pages = getCurrentPages(); |
return item.trim().toLowerCase() === 'true'; |
||||
const currentPage = pages[pages.length - 1]; |
}); |
||||
const currentPath = currentPage.route; |
}, |
||||
this.tabBarList.forEach((item, index) => { |
methods: { |
||||
if (item.pagePath === currentPath) { |
getCurrentTab() { |
||||
this.currentTab = index; |
const pages = getCurrentPages(); |
||||
} |
const currentPage = pages[pages.length - 1]; |
||||
}); |
const currentPath = currentPage.route; |
||||
}, |
this.tabBarList.forEach((item, index) => { |
||||
switchTab(index) { |
if (item.pagePath === currentPath) { |
||||
if (this.currentTab === index) return; |
this.currentTab = index; |
||||
uni.switchTab({ |
} |
||||
url: '/' + this.tabBarList[index].pagePath |
}); |
||||
}); |
}, |
||||
} |
switchTab(index) { |
||||
} |
if (this.currentTab === index) return; |
||||
}; |
uni.switchTab({ |
||||
|
url: '/' + this.tabBarList[index].pagePath |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped> |
<style scoped> |
||||
.custom-tab-bar { |
.custom-tab-bar { |
||||
position: fixed; |
position: fixed; |
||||
bottom: 0; |
bottom: 0; |
||||
left: 0; |
left: 0; |
||||
right: 0; |
right: 0; |
||||
display: flex; |
display: flex; |
||||
justify-content: space-around; |
justify-content: space-around; |
||||
align-items: center; |
align-items: center; |
||||
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> |
Loading…
Reference in new issue