| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 |
- // custom-tab-bar/index.js
- Component({
- data: {
- tabList: [], // 动态生成的tab列表
- currentPath: '' // 当前页面路径
- },
-
- attached() {
- // 1. 先初始化tab列表(确保有数据可匹配)
- this.initTabList();
-
- // 2. 初始化当前路径
- this.updateCurrentPath();
-
- // 3. 监听小程序显示事件(覆盖切换tab、后台切前台等场景)
- this.appShowListener = () => {
- // 延迟确保页面栈已更新(真机需要更长时间)
- setTimeout(() => {
- this.updateCurrentPath();
- }, 300);
- };
- wx.onAppShow(this.appShowListener);
- },
-
- detached() {
- // 移除监听,避免内存泄漏
- wx.offAppShow(this.appShowListener);
- },
-
- methods: {
- // 初始化tab列表(根据角色筛选)
- initTabList() {
- const role = wx.getStorageSync('partnerPosition') || {};
-
- // 全部角色的tab配置
- const allTabs = [
- {
- pagePath: '/pages/home/index',
- text: '电站',
- iconPath: '/static/station2.png',
- selectedIconPath: '/static/station1.png'
- },
- {
- pagePath: '/pages/index/index',
- text: '首页',
- iconPath: '/static/sz3.png',
- selectedIconPath: '/static/sz4.png'
- },
- {
- pagePath: '/pages/tool/index',
- text: '工单',
- iconPath: '/static/tool.png',
- selectedIconPath: '/static/tool1.png'
- },
- {
- pagePath: '/pages/setup/index',
- text: '我的',
- iconPath: '/static/user1.png',
- selectedIconPath: '/static/user2.png'
- }
- ];
-
- // 客户角色的tab配置
- const customerTabs = [
- {
- pagePath: '/pages/home/index',
- text: '电站',
- iconPath: '/static/station2.png',
- selectedIconPath: '/static/station1.png'
- },
- {
- pagePath: '/pages/tool/index',
- text: '工单',
- iconPath: '/static/tool.png',
- selectedIconPath: '/static/tool1.png'
- },
- {
- pagePath: '/pages/setup/index',
- text: '我的',
- iconPath: '/static/user1.png',
- selectedIconPath: '/static/user2.png'
- }
- ];
-
- // 根据角色筛选tab
- let tabList = allTabs;
- if (role.partnerPosition === 5) {
- tabList = customerTabs;
- }
-
- // 确保tabList更新后重新校验路径
- this.setData({ tabList }, () => {
- this.updateCurrentPath();
- });
- },
-
- // 更新当前页面路径(核心方法)
- updateCurrentPath() {
- const pages = getCurrentPages();
- if (pages.length === 0) return;
-
- // 获取当前页面完整路径
- const currentPage = pages[pages.length - 1];
- const currentPath = `/${currentPage.route}`;
-
- // 仅在路径变化且为tab页时更新
- const isTabPage = this.data.tabList.some(item => item.pagePath === currentPath);
- if (isTabPage && this.data.currentPath !== currentPath) {
- this.setData({ currentPath }, () => {
- console.log('路径已同步:', currentPath);
- });
- }
- },
-
- // 切换tab页
- switchTab(e) {
- const path = e.currentTarget.dataset.path;
- if (!path) return;
-
- // 提前记录目标路径(用于预更新状态)
- const targetPath = path;
-
- wx.switchTab({
- url: targetPath,
- success: () => {
- // 延长延迟确保页面完全切换(解决异步滞后问题)
- setTimeout(() => {
- this.updateCurrentPath();
- }, 500);
- },
- fail: (err) => {
- console.error('切换tab失败:', err);
- }
- });
- }
- }
- });
|