refactor: 自定义tabbar
This commit is contained in:
菲鸽
parent
de8df540c2
commit
ee52ae132d
@ -27,16 +27,15 @@ export default defineUniPages({
|
||||
spacing: '3px',
|
||||
list: [
|
||||
{
|
||||
iconPath: 'static/tabbar/home.png',
|
||||
selectedIconPath: 'static/tabbar/homeHL.png',
|
||||
pagePath: 'pages/index/index',
|
||||
icon: 'home',
|
||||
text: '首页',
|
||||
},
|
||||
{
|
||||
iconPath: 'static/tabbar/example.png',
|
||||
selectedIconPath: 'static/tabbar/exampleHL.png',
|
||||
pagePath: 'pages/index/about',
|
||||
text: '关于',
|
||||
pagePath: 'pages/my/index',
|
||||
icon: 'i-carbon-user-avatar',
|
||||
isUnocssIcon: true,
|
||||
text: '我的',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -1,82 +1,37 @@
|
||||
<template>
|
||||
<view class="tab-bar">
|
||||
<view class="content">
|
||||
<view
|
||||
class="one-tab"
|
||||
v-for="(item, index) in tabBarList"
|
||||
:key="index"
|
||||
@click="selectTabBar(index)"
|
||||
<wd-tabbar
|
||||
fixed
|
||||
v-model="tabbarStore.curIdx"
|
||||
bordered
|
||||
safeAreaInsetBottom
|
||||
placeholder
|
||||
@change="selectTabBar"
|
||||
>
|
||||
<view>
|
||||
<view class="tab-img">
|
||||
<image v-if="tabIndex === index" class="img" :src="item.selectedIconPath"></image>
|
||||
<image v-else class="img" :src="item.iconPath"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="tabIndex === index" class="tit select-texts">{{ item.text }}</view>
|
||||
<view v-else class="tit texts">{{ item.text }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<block v-for="(item, idx) in tabbarList" :key="item.path">
|
||||
<wd-tabbar-item v-if="item.isUnocssIcon" :title="item.text">
|
||||
<template #icon>
|
||||
<view
|
||||
h-40rpx
|
||||
w-40rpx
|
||||
:class="[item.icon, idx === tabbarStore.curIdx ? 'is-active' : 'is-inactive']"
|
||||
></view>
|
||||
</template>
|
||||
</wd-tabbar-item>
|
||||
<wd-tabbar-item v-else :title="item.text" :icon="item.icon"></wd-tabbar-item>
|
||||
</block>
|
||||
</wd-tabbar>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useTabbarStore } from '@/store/tabbar'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { tabBar } from '@/pages.json'
|
||||
import { tabbarStore } from './tabbar'
|
||||
|
||||
const tabbar = useTabbarStore()
|
||||
const { tabBarList, tabIndex } = storeToRefs(tabbar)
|
||||
const { setTabIndex } = tabbar
|
||||
/** tabbarList 里面的 path 必须和 pages.config.ts 的页面路径一致 */
|
||||
const tabbarList = tabBar.list.map((item) => ({ ...item, path: `/${item.pagePath}` }))
|
||||
|
||||
function selectTabBar(index: number) {
|
||||
setTabIndex(index)
|
||||
uni.switchTab({ url: tabBarList.value[index].pagePath })
|
||||
function selectTabBar({ value: index }: { value: number }) {
|
||||
const url = tabbarList[index].path
|
||||
tabbarStore.setCurIdx(index)
|
||||
uni.switchTab({ url })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.tab-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
padding-top: 10rpx;
|
||||
padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
|
||||
background-color: #f8f8f8;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
|
||||
.one-tab {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 50%;
|
||||
|
||||
.tab-img {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.tit {
|
||||
font-size: 30rpx;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
.select-texts {
|
||||
color: #018d71;
|
||||
}
|
||||
|
||||
.texts {
|
||||
color: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
21
src/components/fg-tabbar/tabbar.ts
Normal file
21
src/components/fg-tabbar/tabbar.ts
Normal file
@ -0,0 +1,21 @@
|
||||
export const tabbarList = [
|
||||
{
|
||||
path: '/pages/index/about',
|
||||
icon: 'home',
|
||||
isWotIcon: true,
|
||||
title: '首页',
|
||||
},
|
||||
{
|
||||
path: '/pages/index/index',
|
||||
icon: 'i-carbon-user-avatar',
|
||||
isWotIcon: false,
|
||||
title: '我的',
|
||||
},
|
||||
]
|
||||
|
||||
export const tabbarStore = reactive({
|
||||
curIdx: 0,
|
||||
setCurIdx(idx: number) {
|
||||
this.curIdx = idx
|
||||
},
|
||||
})
|
||||
20
src/pages/my/index.vue
Normal file
20
src/pages/my/index.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationBarTitleText: '我的',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="">my</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
//
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//
|
||||
</style>
|
||||
@ -1,42 +0,0 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
|
||||
export const useTabbarStore = defineStore(
|
||||
'tabbar',
|
||||
() => {
|
||||
interface tabBarItem {
|
||||
iconPath: string
|
||||
selectedIconPath: string
|
||||
pagePath: string
|
||||
text: string
|
||||
}
|
||||
const tabBarList = ref<tabBarItem[]>([
|
||||
{
|
||||
iconPath: '/static/tabbar/home.png',
|
||||
selectedIconPath: '/static/tabbar/homeHL.png',
|
||||
pagePath: '/pages/index/index',
|
||||
text: '首页',
|
||||
},
|
||||
{
|
||||
iconPath: '/static/tabbar/example.png',
|
||||
selectedIconPath: '/static/tabbar/exampleHL.png',
|
||||
pagePath: '/pages/index/about',
|
||||
text: '关于',
|
||||
},
|
||||
])
|
||||
const tabIndex = ref(0)
|
||||
|
||||
const setTabIndex = (val: number) => {
|
||||
tabIndex.value = val
|
||||
}
|
||||
|
||||
return {
|
||||
tabBarList,
|
||||
tabIndex,
|
||||
setTabIndex,
|
||||
}
|
||||
},
|
||||
{
|
||||
persist: true,
|
||||
},
|
||||
)
|
||||
@ -1,4 +1,3 @@
|
||||
// @ts-expect-error import json file
|
||||
import { pages, subPackages, tabBar } from '@/pages.json'
|
||||
|
||||
/** 判断当前页面是否是tabbar页 */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user