小程序封装tabbar

爱被打了一巴掌 2022-11-15 11:29 223阅读 0赞

## 项目需求 ##

两种tabbar，外部tabbar有一个入口里面套了一个商城，商城有自己的tabbar，外部tabbar进入部分菜单时有限制条件，判断用户是否登录，是否入驻。

## 踩坑过程 ##

1.  小程序app.json自带的tabbar，功能太少，只能做普通的跳转页面，pass。
2.  小程序官方weui提供的tabbar，比自带的稍微好一点，但能做到的功能也很少，不符合我的项目需求，pass。
3.  自己封装一个tabbar。

## 代码实现 ##

创建一个component文件

<view class="tab-bar">
      <view wx:for="{ {tabbarList}}" wx:key="index" class="tab-item" data-name="{ {item.name}}" bindtap="_tabChange">
        <image wx:if="{ {item.name === cate}}" src="{ {item.selectedIconPath}}" class="tab-select-icon"></image>
        <image wx:else src="{ {item.iconPath}}" class="tab-icon"></image>
        <text class="tab-name { {item.name === cate ? 'tab-name-active' : ''}}">{
       {item.text}}</text>
      </view>
    </view>

// components/tabbar/tabbar.js
    const app = getApp();
    Component({ 
      /** * 组件的属性列表 */
      properties: { 
        // 是否登录
        isLogin: { 
          type: Boolean,
          value: false
        },
        // 入驻状态
        status: { 
          type: Number,
          value: 1
        }
      },
    
      /** * 组件的初始数据 */
      data: { 
        // 当前选中的菜单栏 
        cate: '',
        // 菜单栏列表
        tabbarList: [{ 
            text: '首页',
            name: 'home',
            iconPath: '/assets/images/tab/home_icon@2x.png',
            selectedIconPath: '/assets/images/tab/homed_icon@2x.png'
          },
          { 
            text: '辅材商城',
            name: 'shop',
            iconPath: '/assets/images/tab/shop_icon@2x.png',
            selectedIconPath: '/assets/images/tab/shopd_icon@2x.png'
          },
          { 
            text: '安装单',
            name: 'order',
            iconPath: '/assets/images/tab/order_icon@2x.png',
            selectedIconPath: '/assets/images/tab/orderd_icon@2x.png'
          },
          { 
            text: '我的',
            name: 'my',
            iconPath: '/assets/images/tab/my_icon@2x.png',
            selectedIconPath: '/assets/images/tab/myd_icon@2x.png'
          }
        ]
      },
      lifetimes: { 
        attached: function () { 
          this.initPage();
        }
      },
    
      /** * 组件的方法列表 */
      methods: { 
        // 初始化页面
        initPage() { 
          let cate = wx.getStorageSync('index_cate') || 'my';
          this.setData({ 
            cate
          })
        },
        // 跳转菜单
        _tabChange(e) { 
          if (e.currentTarget.dataset.name === 'home' || e.currentTarget.dataset.name === 'order') { 
            if (this.properties.isLogin) { 
              // 已登录
              switch (this.properties.status) { 
                case 1:
                  // 未入驻
                  app.toast('您还未入驻', 'none');
                  break;
                case 2:
                  // 审核中
                  app.toast('入驻申请审核中', 'none');
                  break;
                case 3:
                  this.setData({ 
                    cate: e.currentTarget.dataset.name
                  })
                  if (e.currentTarget.dataset.name === 'home') { 
                    wx.removeStorageSync('order_cate');
                  }
                  break;
                case 4:
                  app.toast('您的入驻申请未通过', 'none');
                  break;
              }
    
            } else { 
              // 未登录
              app.toast('您还未登录', 'none');
            }
          } else if (e.currentTarget.dataset.name === 'my') { 
            this.setData({ 
              cate: e.currentTarget.dataset.name,
            })
            wx.removeStorageSync('order_cate');
          } else { 
            if (this.properties.isLogin) { 
              wx.navigateTo({ 
                url: '/pages/shop/shop',
              })
            } else { 
              // 未登录
              app.toast('您还未登录', 'none');
            }
          }
    
          this.triggerEvent("tabChange", { 
            cate: this.data.cate
          })
        }
      }
    })

使用tabbar

// json
    "usingComponents": { 
        "mytabbar": "../../components/tabbar/tabbar",
        "home": "../home/home",
        "order": "../order/order",
        "my": "../my/my"
      },
      
    // html
    <view class="container">
      <div class="main">
        <home wx:if="{ {cate === 'home'}}"></home>
        <order wx:elif="{ {cate === 'order'}}" class="order" ></order>
        <my wx:else="{ {cate === 'my'}}" class="my" bind:changeLogin="changeLogin" bind:changeStatus="changeStatus"></my>
      </div>
    
      <mytabbar class="my-tabbar" bind:tabChange="tabChange" isLogin="{ {isLogin}}" status="{ {status}}"></mytabbar>
    </view>
    
    // js
    // 获取应用实例
    const app = getApp()
    Page({ 
      /**
       * 页面的初始数据
       */
      data: { 
        // 当前显示的模块
        cate: 'my',
        // 是否登录
        isLogin: false,
        // 入驻状态   1 未申请  2 审核中  3 审核通过  4 审核退回
        status: 1,
      },
      onShow() { 
        this.initPage();
      },
      //初始化页面
      initPage() { 
        let cate = wx.getStorageSync('index_cate') || 'my';
        this.setData({ 
          cate
        })
      },
      // 更新登录状态
      changeLogin(e) { 
        this.setData({ 
          isLogin: e.detail.isLogin
        })
      },
      // 更新入驻状态
      changeStatus(e) { 
        this.setData({ 
          status: e.detail.status
        })
      },
      // 更改显示的模块
      tabChange(e) { 
        if (e.detail.cate === 'home' || e.detail.cate === 'order') { 
          if (this.data.isLogin) { 
            // 已登录
            switch (this.data.status) { 
              case 1:
              case 2:
              case 4:
                break;
              case 3:
                this.setData({ 
                  cate: e.detail.cate
                });
                wx.setStorageSync('index_cate', e.detail.cate)
                break;
            }
    
          } else { 
            // 未登录
            app.toast('您还未登录', 'none');
          }
        } else { 
          this.setData({ 
            cate: e.detail.cate
          })
          wx.setStorageSync('index_cate', e.detail.cate)
        }
      }
    })

## 效果 ##

![在这里插入图片描述][20210331174505733.gif_pic_center]

[20210331174505733.gif_pic_center]: /images/20221022/328d2267f0fa4cf890eaf81be34f2929.png