自定义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",
"dayjs": "^1.11.10",
"pinia": "^2.1.7",
"pinia-plugin-persistedstate": "^4.0.1",
"vue": "^3.0.0"
},
"devDependencies": {

View File

@ -22,6 +22,12 @@ export default defineAppConfig({
iconPath: "assets/mine/punch.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',
text: '员工信息',

View File

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

View File

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

View File

@ -27,33 +27,48 @@
<script setup lang="ts">
import "./login.scss";
import Taro, { useLoad } from "@tarojs/taro";
import Taro, {useLoad} from "@tarojs/taro";
import api from "@/request/index";
import {useCounterStore} from '@/store'
useLoad(() => {});
const store = useCounterStore()
useLoad(() => {
});
const onLogin = () => {
Taro.login({
success: (res) => {
if(res.code){
if (res.code) {
api.post<LoginUserInfo>("/login", {
clientType: 'MINI_PROGRAM',
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({
key: "token",
data: resp.data,
success(res) {
Taro.switchTab({
url: '/pages/projectManager/index/index'
// url: '/pages/projectManager/index/index'
url: store.list[0].pagePath
})
},
})
}).catch((error)=>{
if(error.code === 402){
}).catch((error) => {
if (error.code === 402) {
Taro.navigateTo({
url: "/pages/register/register",
});
@ -64,8 +79,5 @@ const onLogin = () => {
});
};
</script>

View File

@ -1,19 +1,51 @@
import {defineStore} from 'pinia'
import Taro from '@tarojs/taro'
export const useCounterStore = defineStore('counter', {
state: () => {
return {
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: {
setSelected(index: number) {
this.selected = index
},
updateHomePagePath(newPath: string) {
this.list[0].pagePath = newPath
// 更新 list 后存储到小程序本地存储
Taro.setStorageSync('list', this.list)
}
},
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
}
})