自定义tabbar

This commit is contained in:
TimSpan 2024-09-11 11:35:24 +08:00
parent 7f86ec40cc
commit 28cbb4647c
6 changed files with 84 additions and 47 deletions

View File

@ -59,6 +59,7 @@
"@tarojs/taro": "3.6.25", "@tarojs/taro": "3.6.25",
"dayjs": "^1.11.10", "dayjs": "^1.11.10",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"pinia-plugin-persistedstate": "^4.0.1",
"vue": "^3.0.0" "vue": "^3.0.0"
}, },
"devDependencies": { "devDependencies": {

View File

@ -22,6 +22,12 @@ export default defineAppConfig({
iconPath: "assets/mine/punch.png", iconPath: "assets/mine/punch.png",
selectedIconPath: "assets/mine/punch-active.png" selectedIconPath: "assets/mine/punch-active.png"
}, },
{
pagePath: 'pages/policeManager/index/index',
text: '首页',
iconPath: "assets/mine/punch.png",
selectedIconPath: "assets/mine/punch-active.png"
},
{ {
pagePath: 'pages/employeeInfo/employeeInfo', pagePath: 'pages/employeeInfo/employeeInfo',
text: '员工信息', text: '员工信息',

View File

@ -2,7 +2,10 @@ import {createApp} from 'vue'
import {createPinia} from 'pinia' import {createPinia} from 'pinia'
import './app.scss' import './app.scss'
import './assets/scss/colorui.scss' import './assets/scss/colorui.scss'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
const App = createApp({ const App = createApp({
onShow(options) { onShow(options) {
console.log('App onShow.') console.log('App onShow.')
@ -10,6 +13,6 @@ const App = createApp({
// 入口组件不需要实现 render 方法,即使实现了也会被 taro 所覆盖 // 入口组件不需要实现 render 方法,即使实现了也会被 taro 所覆盖
}) })
App.use(createPinia()) App.use(pinia)
export default App export default App

View File

@ -1,11 +1,14 @@
<template> <template>
<cover-view class="tab-bar"> <!--https://developers.weixin.qq.com/community/develop/doc/000c84de0cc590bbe54b97edf5e414?highLine=%25E8%2587%25AA%25E5%25AE%259A%25E4%25B9%2589tabbar-->
<cover-view class="tab-bar-border"></cover-view> <!--微信官方 回复 关于 自定义tabbar切换时会闪烁-->
<cover-view v-for="(item, index) in list" :key="index" class="tab-bar-item" @tap="switchTab(index, item.pagePath)">
<cover-image :src="selected === index ? item.selectedIconPath : item.iconPath"/> <view class="tab-bar">
<cover-view :style="{ color: selected === index ? selectedColor : color }">{{ item.text }}</cover-view> <view class="tab-bar-border"></view>
</cover-view> <view v-for="(item, index) in list" :key="index" class="tab-bar-item" @tap="switchTab(index, item.pagePath)">
</cover-view> <image :src="selected === index ? item.selectedIconPath : item.iconPath"/>
<view :style="{ color: selected === index ? selectedColor : color }">{{ item.text }}</view>
</view>
</view>
</template> </template>
<script setup> <script setup>
@ -15,29 +18,9 @@ import {useCounterStore} from '@/store'
const store = useCounterStore() const store = useCounterStore()
const selected = computed(() => store.getSelected) const selected = computed(() => store.getSelected)
const color = '#000000' const color = '#000000'
const selectedColor = '#DC143C' const selectedColor = '#DC143C'
const list = [ const list = computed(() => store.getList)
{
pagePath: '/pages/projectManager/index/index',
text: '首页',
iconPath: "../assets/mine/punch.png",
selectedIconPath: "../assets/mine/punch-active.png"
},
{
pagePath: '/pages/employeeInfo/employeeInfo',
text: '员工信息',
iconPath: "../assets/mine/punch.png",
selectedIconPath: "../assets/mine/punch-active.png"
},
{
pagePath: '/pages/mine/mine',
text: '我的',
iconPath: "../assets/mine/my.png",
selectedIconPath: "../assets/mine/my-active.png"
},
]
function switchTab(index, url) { function switchTab(index, url) {
setSelected(index) setSelected(index)
@ -80,12 +63,12 @@ function setSelected(index) {
flex-direction: column; flex-direction: column;
} }
.tab-bar-item cover-image { .tab-bar-item image {
width: 54px; width: 54px;
height: 54px; height: 54px;
} }
.tab-bar-item cover-view { .tab-bar-item view {
font-size: 20px; font-size: 20px;
} }
</style> </style>

View File

@ -27,33 +27,48 @@
<script setup lang="ts"> <script setup lang="ts">
import "./login.scss"; import "./login.scss";
import Taro, { useLoad } from "@tarojs/taro"; import Taro, {useLoad} from "@tarojs/taro";
import api from "@/request/index"; import api from "@/request/index";
import {useCounterStore} from '@/store'
const store = useCounterStore()
useLoad(() => {}); useLoad(() => {
});
const onLogin = () => { const onLogin = () => {
Taro.login({ Taro.login({
success: (res) => { success: (res) => {
if(res.code){ if (res.code) {
api.post<LoginUserInfo>("/login", { api.post<LoginUserInfo>("/login", {
clientType: 'MINI_PROGRAM', clientType: 'MINI_PROGRAM',
loginParams: { loginParams: {
code:res.code code: res.code
} }
}).then(async (resp)=>{ }).then(async (resp) => {
const {
extData: {
identity: {value}
}
} = resp.data
if (value === 'police') {
store.updateHomePagePath('/pages/policeManager/index/index') //
} else {
store.updateHomePagePath('/pages/projectManager/index/index') //
}
// list Pinia
await Taro.setStorageSync('list', store.list)
await Taro.setStorage({ await Taro.setStorage({
key: "token", key: "token",
data: resp.data, data: resp.data,
success(res) { success(res) {
Taro.switchTab({ Taro.switchTab({
url: '/pages/projectManager/index/index' // url: '/pages/projectManager/index/index'
url: store.list[0].pagePath
}) })
}, },
}) })
}).catch((error)=>{ }).catch((error) => {
if(error.code === 402){ if (error.code === 402) {
Taro.navigateTo({ Taro.navigateTo({
url: "/pages/register/register", url: "/pages/register/register",
}); });
@ -64,8 +79,5 @@ const onLogin = () => {
}); });
}; };
</script> </script>

View File

@ -1,19 +1,51 @@
import {defineStore} from 'pinia' import {defineStore} from 'pinia'
import Taro from '@tarojs/taro'
export const useCounterStore = defineStore('counter', { export const useCounterStore = defineStore('counter', {
state: () => { state: () => {
return { return {
userInfo: {}, userInfo: {},
selected: 0 selected: 0,
list: Taro.getStorageSync('list') || [
{
pagePath: '/pages/projectManager/index/index',
text: '首页',
iconPath: "/assets/mine/punch.png",
selectedIconPath: "/assets/mine/punch-active.png"
},
{
pagePath: '/pages/employeeInfo/employeeInfo',
text: '员工信息',
iconPath: "/assets/mine/punch.png",
selectedIconPath: "/assets/mine/punch-active.png"
},
{
pagePath: '/pages/mine/mine',
text: '我的',
iconPath: "/assets/mine/my.png",
selectedIconPath: "/assets/mine/my-active.png"
},
]
} }
}, },
actions: { actions: {
setSelected(index: number) { setSelected(index: number) {
this.selected = index this.selected = index
},
updateHomePagePath(newPath: string) {
this.list[0].pagePath = newPath
// 更新 list 后存储到小程序本地存储
Taro.setStorageSync('list', this.list)
} }
}, },
getters: { getters: {
getSelected: (state) => state.selected getSelected: (state) => state.selected,
getList: (state) => state.list
},
persist: {
// key: 'my-store', // 存储到 localStorage 的 key
// storage: localStorage, // 持久化方式为 localStorage
// paths: ['list'] // 持久化 list
} }
}) })