微信小程序自定义底部导航栏-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序自定义底部导航栏。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

概要

微信小程序自定义底部导航栏，原生实现，不包含其他任何第三方组件，比较干净，开箱即用
效果预览：
微信小程序底部,微信小程序,小程序

功能

可自定义底部导航栏列表样式
可自定义每个菜单的默认、激活后的图标和文字样式
可自定义是否添加中间的大图标菜单，当然也可自定义大图标的默认与激活样式
可自定义激活动画，默认这个心跳过渡动画
可获取到底部导航栏高度，存在app全局变量中，其他页面有特殊需求需要动态计算页面高度时可能需要用到此属性
解决点击导航菜单时，激活的菜单貌似并不同步的问题
底部根据是否有安全距离自动调整

源码

不废话，直接贴上完整源码

微信小程序底部,微信小程序,小程序
js

const app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    selected: 0, // 激活的tab
    // tabber列表，与app.json一致
    color: "#666666",
    selectedColor: "#ff0000",
    backgroundColor: "#ffffff",
    // 注: list中的pagePath需要加'/'开头，否则在switchTab跳转url时会自带/src/pages开头导致路径错误
    list: [{
      "pagePath": "/src/pages/home/home",
      "icon": "./images/home.png",
      "iconActive": "./images/home-a.png",
      "text": "首页",
    }, {
      "pagePath": "/src/pages/monitor/monitor",
      "icon": "./images/relic.png",
      "iconActive": "./images/relic-a.png",
      "text": "文物监测"
    }, {
      "pagePath": "/src/pages/map/map",
      "icon": "./images/map.png",
      "iconActive": "./images/map.png",
      "center": true, // 中间大图标的参数，true时就会变大，默认非大图标
    }, {
      "pagePath": "/src/pages/news/news",
      "icon": "./images/hot.png",
      "iconActive": "./images/hot-a.png",
      "text": "文博资讯"
    }, {
      "pagePath": "/src/pages/mine/mine",
      "icon": "./images/mine.png",
      "iconActive": "./images/mine-a.png",
      "text": "我的"
    }],
    tabbarHeight: 0
  },

  lifetimes: {
    attached: function () {
      // 获取tab栏高度
      const query = wx.createSelectorQuery().in(this)
      query.select('#tabbar').boundingClientRect((res) => {
        // console.log('tab栏dom', res);
        this.setData({
          tabbarHeight: res.height
        })
        // 将tab栏高度设置进全局数据
        app.globalData.tabbarHeight = res.height
      }).exec()

      /**
       * 将初始化tabbar栏方法存入全局
       * @param {*} that 传入当前tab页面的this实例
       * @param {*} index 传入当前tab页面的索引
       * 若无该方法，会导致点击tab时激活的tab顺序错乱!
       * 例如在home首页onShow的生命周期钩子中，getApp().globalData.initTabbar(this, 0)
       */
      app.globalData.initTabbar = (that, index) => {
        if (typeof that.getTabBar === 'function' && that.getTabBar()) {
          that.getTabBar().setData({
            selected: index
          })
        }
      }
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    switchTab(e) {
      // bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡
      const {
        index,
        url
      } = e.currentTarget.dataset
      if (this.data.selected !== index) {
        this.setData({
          selected: index
        })
        wx.switchTab({
          url: url,
        })
      }
    }
  }
})

wxml

<view class="tabbar" style="background-color: {{backgroundColor}};" id="tabbar">
  <view class="{{'tab'}} {{selected == index ? 'beat' : ''}}" wx:for="{{list}}" wx:key="item" catchtap="switchTab" data-index="{{index}}" data-url="{{item.pagePath}}">
    <view class="{{'tab-icon'}} {{item.center ? 'tab-icon-center' : ''}}" style="background-color: {{backgroundColor}};">
      <image style="width:100%;height:100%;" src="{{selected == index ? item.iconActive : item.icon}}" mode="" />
    </view>
    <view style="font-size:24rpx;color:{{selected == index ? selectedColor : color}}">
      {{item.text}}
    </view>
  </view>
</view>

wxss

.tabbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 120rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 16px rgba(184, 184, 210, 0.5);
  /* 利用ios新增的 env() 和 constant() 特性，自动计算底部安全距离 */
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  display: flex;
  justify-content: space-evenly;
}

.tab {
  width: 100%;
  height: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.tab-icon {
  width: 68rpx;
  height: 68rpx;
}

.tab-icon-center {
  width: 160rpx;
  height: 160rpx;
  position: absolute;
  top: -24rpx;
  padding: 12rpx;
  box-sizing: border-box;
  border-radius: 80rpx;
}

.beat {
  animation: beat 0.8s both;
}

@keyframes beat {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.05, 0.95, 1);
  }
  40% {
    transform: scale3d(0.85, 1.15, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

不要忘了在app.json文件中添加 tabBar 属性

"tabBar": {
    "custom": true,
    "color": "#666666",
    "selectedColor": "#ff0000",
    "backgroundColor": "#000000",
    "list": [
      {
        "pagePath": "src/pages/home/home",
        "text": "首页"
      },
      {
        "pagePath": "src/pages/monitor/monitor",
        "text": "监测"
      },
      {
        "pagePath": "src/pages/map/map",
        "text": "地图"
      },
      {
        "pagePath": "src/pages/news/news",
        "text": "资讯"
      },
      {
        "pagePath": "src/pages/mine/mine",
        "text": "我的"
      }
    ]
  }

细节

注意上述js代码块中 initTabbar 方法，需要在每个tabbar页面使用
例如首页是home，那么就在home.js中的onShow生命周期钩子中，写上getApp().globalData.initTabbar(this, 0)即可，参数中的0就是该tabbar的索引位置，第一个页面就是0，第二个就是1，以此类推
注意页面路径问题，在代码块中有注释
注意这个custom-tab-bar组件要放在根目录哦