tabbar bug修复
This commit is contained in:
BAKEYi
parent
bbe660cbfc
commit
1d611bee0b
|
|
@ -1,10 +1,24 @@
|
|||
<template>
|
||||
<uv-tabbar fixed :value="selected" @change="change1" activeColor="#FF4767 " :placeholder="false"
|
||||
:safeAreaInsetBottom="false" :customStyle="{height:`110rpx`}">
|
||||
<!-- <uv-tabbar-item v-for="(item,index) in $store.state.tabbarList" :key="index" :text="item.text" -->
|
||||
<uv-tabbar-item v-for="(item,index) in tabbarList" :key="index" :text="item.text"
|
||||
:badge="getNum(index)"
|
||||
:customStyle="{height:`110rpx`}">
|
||||
<uv-tabbar
|
||||
v-if="tabbarReady"
|
||||
:key="refreshKey"
|
||||
fixed
|
||||
:value="currentTabIndex"
|
||||
@change="onTabChange"
|
||||
activeColor="#FF4767"
|
||||
:placeholder="false"
|
||||
:safeAreaInsetBottom="false"
|
||||
:customStyle="{height:'110rpx'}"
|
||||
>
|
||||
<uv-tabbar-item
|
||||
v-for="(item, idx) in tabbarList"
|
||||
:key="idx"
|
||||
:name="idx"
|
||||
:text="item.text"
|
||||
:badge="getNum(idx)"
|
||||
:customStyle="{height:'110rpx'}"
|
||||
@click="onItemClick(idx)"
|
||||
>
|
||||
<template v-slot:active-icon>
|
||||
<image class="icon" :src="item.selectedIconPath"></image>
|
||||
</template>
|
||||
|
|
@ -16,116 +30,154 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import request from "@/utils/request";
|
||||
export default {
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
import request from "@/utils/request";
|
||||
|
||||
export default {
|
||||
name: "tab-bar",
|
||||
props: {
|
||||
selected: {
|
||||
type: [Number, String]
|
||||
}
|
||||
},
|
||||
// 不再需要 props.selected，完全由 Vuex 控制高亮
|
||||
data() {
|
||||
return {
|
||||
tabbarList: [{
|
||||
"iconPath": "/static/images/tabbar/new_home_gray.png",
|
||||
"text": "首页",
|
||||
"selectedIconPath": "/static/images/tabbar/new_home.png",
|
||||
"pagePath": "/pages/home/home"
|
||||
refreshKey: 0, // 强制重建标识
|
||||
tabbarReady: false, // 组件就绪标识
|
||||
tabbarList: [ // tab 配置
|
||||
{
|
||||
iconPath: "/static/images/tabbar/new_home_gray.png",
|
||||
text: "首页",
|
||||
selectedIconPath: "/static/images/tabbar/new_home.png",
|
||||
pagePath: "/pages/home/home"
|
||||
},
|
||||
{
|
||||
"iconPath": "/static/images/tabbar/new_order_gray.png",
|
||||
"text": "订单",
|
||||
"selectedIconPath": "/static/images/tabbar/new_order.png",
|
||||
"pagePath": "/pages/order/all-orders"
|
||||
iconPath: "/static/images/tabbar/new_order_gray.png",
|
||||
text: "订单",
|
||||
selectedIconPath: "/static/images/tabbar/new_order.png",
|
||||
pagePath: "/pages/order/all-orders"
|
||||
},
|
||||
{
|
||||
"iconPath": "/static/images/tabbar/new_message_gray.png",
|
||||
"text": "消息",
|
||||
"selectedIconPath": "/static/images/tabbar/new_message.png",
|
||||
"pagePath": "/pages/message/message"
|
||||
iconPath: "/static/images/tabbar/new_message_gray.png",
|
||||
text: "消息",
|
||||
selectedIconPath: "/static/images/tabbar/new_message.png",
|
||||
pagePath: "/pages/message/message"
|
||||
},
|
||||
{
|
||||
"iconPath": "/static/images/tabbar/new_my_gray.png",
|
||||
"text": "我的",
|
||||
"selectedIconPath": "/static/images/tabbar/new_my.png",
|
||||
"pagePath": "/pages/my/my"
|
||||
iconPath: "/static/images/tabbar/new_my_gray.png",
|
||||
text: "我的",
|
||||
selectedIconPath: "/static/images/tabbar/new_my.png",
|
||||
pagePath: "/pages/my/my"
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
messageNum() {
|
||||
return this.$store.state.messageNum || 0
|
||||
// 从 Vuex 获取全局高亮索引
|
||||
...mapState(['currentTabIndex', 'messageNum'])
|
||||
},
|
||||
watch: {
|
||||
// 当 tabbarList 内容变化（如异步更新图标）时，强制重建组件
|
||||
tabbarList: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.rebuildTabbar();
|
||||
}
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
// if (!this.$store.state.tabbarList.length) {
|
||||
// let isnNetwork = uni.getStorageSync("isnNetwork");
|
||||
// if (isnNetwork) {
|
||||
// await this.getButtonImg()
|
||||
// } else {
|
||||
// uni.getNetworkType({
|
||||
// success: (res) => {
|
||||
// console.log(res.networkType);
|
||||
// if (res.networkType == "none") {
|
||||
|
||||
// this.$store.commit("setTabbarList", this.tabbarList)
|
||||
// } else {
|
||||
// // 页面加载逻辑
|
||||
// uni.setStorageSync("isnNetwork", 1);
|
||||
// this.getButtonImg()
|
||||
// }
|
||||
// },
|
||||
// });
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
created() {
|
||||
// 初始化时延迟显示，避免闪烁
|
||||
this.tabbarReady = false;
|
||||
this.$nextTick(() => {
|
||||
this.tabbarReady = true;
|
||||
// 如果需要异步加载图标，取消下面注释
|
||||
// this.getButtonImg();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['SET_CURRENT_TAB_INDEX']),
|
||||
|
||||
// 设置全局选中索引（简化调用）
|
||||
setCurrentTabIndex(index) {
|
||||
this.SET_CURRENT_TAB_INDEX(index);
|
||||
},
|
||||
|
||||
// 强制重建 uv-tabbar（用于异步更新图标后）
|
||||
rebuildTabbar() {
|
||||
this.tabbarReady = false;
|
||||
this.$nextTick(() => {
|
||||
this.refreshKey++;
|
||||
this.tabbarReady = true;
|
||||
});
|
||||
},
|
||||
|
||||
// 获取角标数字（只有消息 tab 且数量 > 0 才显示）
|
||||
getNum(index) {
|
||||
if (index == 2) {
|
||||
return this.messageNum
|
||||
} else {
|
||||
return 0
|
||||
if (index === 2 && this.messageNum > 0) {
|
||||
return this.messageNum;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
//获取头部背景图片
|
||||
|
||||
// 异步更新图标（保留你的业务逻辑）
|
||||
async getButtonImg() {
|
||||
try {
|
||||
let res = await request.post("/sj/poster/getButtonImg", {});
|
||||
if (res.code == 200) {
|
||||
// if (res.data?.photo) {
|
||||
// this.topBgImage = res.data?.photo + '?time=666'
|
||||
// }
|
||||
if (res.code === 200) {
|
||||
this.tabbarList.forEach((item, index) => {
|
||||
if (res.data[index].iconPath) {
|
||||
item.iconPath = res.data[index].iconPath
|
||||
if (res.data[index]?.iconPath) {
|
||||
item.iconPath = res.data[index].iconPath;
|
||||
}
|
||||
if (res.data[index].selectedIconPath) {
|
||||
item.selectedIconPath = res.data[index].selectedIconPath
|
||||
if (res.data[index]?.selectedIconPath) {
|
||||
item.selectedIconPath = res.data[index].selectedIconPath;
|
||||
}
|
||||
})
|
||||
});
|
||||
this.$store.commit("setTabbarList", this.tabbarList);
|
||||
// 图标更新后，强制重建组件
|
||||
this.rebuildTabbar();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('getButtonImg 请求失败', err);
|
||||
}
|
||||
this.$store.commit("setTabbarList", this.tabbarList)
|
||||
},
|
||||
change1(val) {
|
||||
// 因为在pages中配置了需要跳转的页面为 tabbar页面
|
||||
// 所以不能使用navigateTo 只能使用下面这个方法跳转。
|
||||
|
||||
// uv-tabbar 的 change 事件（组件内部触发）
|
||||
onTabChange(val) {
|
||||
const idx = parseInt(val, 10);
|
||||
this.doJump(idx);
|
||||
},
|
||||
|
||||
// 手动点击 item 时触发
|
||||
onItemClick(idx) {
|
||||
this.doJump(idx);
|
||||
},
|
||||
|
||||
// 实际跳转逻辑 + 更新全局高亮
|
||||
doJump(index) {
|
||||
const idx = parseInt(index, 10);
|
||||
if (isNaN(idx) || !this.tabbarList[idx]) return;
|
||||
|
||||
// 先更新全局高亮（立即生效）
|
||||
this.setCurrentTabIndex(idx);
|
||||
|
||||
// 跳转页面
|
||||
const targetPage = this.tabbarList[idx].pagePath;
|
||||
uni.switchTab({
|
||||
url: this.tabbarList[val].pagePath
|
||||
})
|
||||
this.messageUpudateNum()
|
||||
url: targetPage,
|
||||
fail: (err) => console.error('switchTab 失败', err)
|
||||
});
|
||||
|
||||
// 保留你原有的消息更新方法
|
||||
if (typeof this.messageUpudateNum === 'function') {
|
||||
this.messageUpudateNum();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.icon {
|
||||
.icon {
|
||||
height: 54rpx;
|
||||
width: 54rpx;
|
||||
}
|
||||
::v-deep .uv-tabbar__content{
|
||||
z-index: 999!important;
|
||||
}
|
||||
}
|
||||
::v-deep .uv-tabbar__content {
|
||||
z-index: 999 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,40 +6,43 @@ Vue.use(Vuex);
|
|||
|
||||
const store = new Vuex.Store({
|
||||
state: {
|
||||
messageNum: 0,//底部消息数量
|
||||
sjServiceList:{},//商家分配手艺人时服务数据shop/staff
|
||||
tabbarList: [], //底部设置
|
||||
messageNum: 0, // 底部消息数量
|
||||
// ========== 新增：全局当前选中的 tab 索引 ==========
|
||||
currentTabIndex: 0, // 用于自定义 tabbar 高亮
|
||||
// ============================================
|
||||
sjServiceList: {}, // 商家分配手艺人时服务数据shop/staff
|
||||
tabbarList: [], // 底部设置
|
||||
reservationTime: {}, // 预约时刻信息
|
||||
reservationSyr: {}, // 预约手艺人人信息
|
||||
reservationAddress: {}, // 预约地址信息
|
||||
selectStore: {}, //选择的门店信息
|
||||
selectStore: {}, // 选择的门店信息
|
||||
wxShareType: 0, // 正式版:0，测试版:1，体验版:2
|
||||
//公共的变量，这里的变量不能随便修改，只能通过触发mutations的方法才能改变
|
||||
searchCity: {
|
||||
center: "117.330043,38.372266",
|
||||
name: "黄骅",
|
||||
},
|
||||
systemInfo: uni.getSystemInfoSync(), //设备信息
|
||||
//是否有定位权限
|
||||
systemInfo: uni.getSystemInfoSync(),
|
||||
isLocation: false,
|
||||
//路由
|
||||
baseUrl: "",
|
||||
//手机和app信息
|
||||
version: {
|
||||
VersionCode: "",
|
||||
DeviceBrand: "",
|
||||
DeviceType: "",
|
||||
},
|
||||
//商家信息
|
||||
sjInfo: {},
|
||||
workSpaceSJClassList: [], //商家工位分类列表
|
||||
workHourSJClassList: [], //商家工时分类列表
|
||||
workSpaceSJClassList: [],
|
||||
workHourSJClassList: [],
|
||||
},
|
||||
mutations: {
|
||||
//写入底部消息数量
|
||||
// 写入底部消息数量
|
||||
setMessageNum(state, newval) {
|
||||
state.messageNum = newval;
|
||||
},
|
||||
// ========== 新增：设置全局当前选中 tab 索引 ==========
|
||||
SET_CURRENT_TAB_INDEX(state, index) {
|
||||
state.currentTabIndex = index;
|
||||
},
|
||||
// ==============================================
|
||||
clearServiceState(state) {
|
||||
state.reservationTime = {};
|
||||
state.reservationSyr = {};
|
||||
|
|
|
|||
Loading…
Reference in New Issue