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