美文网首页
小程序-自定义tabbar

小程序-自定义tabbar

作者: 不可一世老实人 | 来源:发表于2019-08-15 10:22 被阅读0次

    新建组件

    image.png

    tabbar.wxml

    <view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}">
      <block wx:for="{{tabbar.list}}" wx:key="{{item.pagePath}}">
        <navigator wx:if="{{item.isSpecial}}" class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
          <view class='special-wrapper'>
            <image class="tabbar_icon" src="{{item.iconPath}}"></image>
          </view>
          <image class='special-text-wrapper'></image>
          <text>{{item.text}}</text>
        </navigator>
        <navigator wx:else class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
          <image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
          <text>{{item.text}}</text>
        </navigator>
      </block>
    </view>
    

    tabbar.wxss

    .tabbar_box {
      display: flex;
      justify-content: space-around;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 999;
      width: 100%;
      height: 118rpx;
      box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.1);
    }
    
    .tabbar_box.iphoneX-height {
      padding-bottom: 66rpx;
    }
    
    .middle-wrapper {
      position: absolute;
      right: 310rpx;
      bottom: 0;
      background-color: #fff;
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      border-top: 2rpx solid #f2f2f3;
    }
    
    .middle-wrapper.iphoneX-height {
      bottom: 66rpx;
    }
    
    .tabbar_nav {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 20rpx;
      height: 100%;
      position: relative;
    }
    
    .tabbar_icon {
      width: 56rpx;
      height: 56rpx;
      margin-bottom: 6rpx;
    }
    
    .special-wrapper {
      position: absolute;
      left: 30rpx;
      top: -24rpx;
      width: 94rpx;
      height: 96rpx;
      border-radius: 50%;
      border-top: 2rpx solid #f2f2f3;
      background-color: #fff;
      text-align: center;
      box-sizing: border-box;
      padding: 6rpx;
    }
    
    .special-wrapper .tabbar_icon {
      width: 94rpx;
      height: 96rpx;
      position: absolute;
      left: 0;
      top: -8rpx;
    }
    
    .special-text-wrapper {
      width: 56rpx;
      height: 56rpx;
    }
    

    tabbar.js

    // tabBarComponent/tabBar.js
    const app = getApp();
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        tabbar: {
          type: Object,
          value: {
            "color": "#D2D2D2",
            "selectedColor": "#FFC000",
            "backgroundColor": "#ffffff", 
            "list": [
              {
                "pagePath": "/pages/home/index",
                "iconPath": "/tabbar/shouye.png",
                "selectedIconPath": "/tabbar/shouye02.png",
                "text": "首页"
              },
              {
                "pagePath": "/pages/reserve/index",
                "iconPath": "/tabbar/yuding.png",
                "selectedIconPath": "/tabbar/yuding02.png",
                "text": "预定"
              },
              {
                "pagePath": "/pages/match/index",
                "iconPath": "/tabbar/bisai.png",
                "selectedIconPath": "/tabbar/bisai.png",
                "text": "比赛",
                "isSpecial": true
              },
              {
                "pagePath": "/pages/club/index",
                "iconPath": "/tabbar/julebu.png",
                "selectedIconPath": "/tabbar/julebu02.png",
                "text": "俱乐部"
              },
              {
                "pagePath": "/pages/my/index",
                "iconPath": "/tabbar/wode.png",
                "selectedIconPath": "/tabbar/wode02.png",
                "text": "我的"
              }
            ]
          }
        }
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        isIphoneX: app.globalData.systemInfo.model.includes("iPhone X")
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
    
      }
    })
    

    tabbar.json

    {
      "component": true,
      "usingComponents": {}
    }
    

    app.js

    //app.js
    App({
      onLaunch: function(options) {
        //隐藏系统tabbar
        this.hidetabbar();
        //获取设备信息
        this.getSystemInfo();
      },
    
      onShow: function() {
        wx.hideTabBar();
      },
    
      //封装wx.hideTabBar
      hidetabbar() {
        wx.hideTabBar({
          fail: function() {
            setTimeout(function() { // 延时保底
              wx.hideTabBar()
            }, 500)
          }
        });
      },
    
      getSystemInfo: function() {
        let t = this;
        wx.getSystemInfo({
          success: function(res) {
            t.globalData.systemInfo = res;
          }
        });
      },
    
      // 显示tabbar
      editTabbar: function() {
        let tabbar = this.globalData.tabBar;
        let currentPages = getCurrentPages();
        let _this = currentPages[currentPages.length - 1];
        let pagePath = _this.route;
        (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
        for (let i in tabbar.list) {
          tabbar.list[i].selected = false;
          (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
        }
        _this.setData({
          tabbar: tabbar
        });
      },
    
      globalData: {
        systemInfo: null, //客户端设备信息
        tabBar: {
          "color": "#D2D2D2",
          "selectedColor": "#FFC000",
          "backgroundColor": "#ffffff",
          "list": [{
              "pagePath": "/pages/home/index",
              "iconPath": "/images/tabbar/shouye.png",
              "selectedIconPath": "/images/tabbar/shouye02.png",
              "text": "首页"
            },
            {
              "pagePath": "/pages/reserve/index",
              "iconPath": "/images/tabbar/yuding.png",
              "selectedIconPath": "/images/tabbar/yuding02.png",
              "text": "预定"
            },
            {
              "pagePath": "/pages/match/index",
              "iconPath": "/images/tabbar/bisai.png",
              "selectedIconPath": "/images/tabbar/bisai.png",
              "text": "比赛",
              "isSpecial": true
            },
            {
              "pagePath": "/pages/club/index",
              "iconPath": "/images/tabbar/julebu.png",
              "selectedIconPath": "/images/tabbar/julebu02.png",
              "text": "俱乐部"
            },
            {
              "pagePath": "/pages/my/index",
              "iconPath": "/images/tabbar/wode.png",
              "selectedIconPath": "/images/tabbar/wode02.png",
              "text": "我的"
            }
          ]
        }
      },
    })
    

    app.json

    "list": [
          {
            "pagePath": "pages/home/index",
            "iconPath": "images/tabbar/shouye.png",
            "selectedIconPath": "images/tabbar/shouye02.png",
            "text": "首页"
          },
          {
            "pagePath": "pages/reserve/index",
            "iconPath": "images/tabbar/yuding.png",
            "selectedIconPath": "images/tabbar/yuding02.png",
            "text": "预定"
          },
          {
            "pagePath": "pages/match/index",
            "iconPath": "/images/tabbar/bisai.png",
            "selectedIconPath": "/images/tabbar/bisai.png",
            "text": "比赛",
            "isSpecial": true
          },
          {
            "pagePath": "pages/club/index",
            "iconPath": "images/tabbar/julebu.png",
            "selectedIconPath": "images/tabbar/julebu02.png",
            "text": "俱乐部"
          },
          {
            "pagePath": "pages/my/index",
            "iconPath": "images/tabbar/wode.png",
            "selectedIconPath": "images/tabbar/wode02.png",
            "text": "我的"
          }
        ]
    

    页面.json

    "usingComponents": {
        "tabbar": "/component/custom-tabbar/tabbar"
      }
    

    页面 wxml 使用

    <tabbar tabbar="{{tabbar}}"></tabbar>
    

    页面 js

    //获取应用实例
    const app = getApp()
    
    Page({
      data: {
        tabbar: {}
      },
    
      onLoad: function() {
        app.editTabbar();
      },
    
      onShow: function() {
        app.hidetabbar();
      },
    
    })
    

    相关文章

      网友评论

          本文标题:小程序-自定义tabbar

          本文链接:https://www.haomeiwen.com/subject/zxpajctx.html