mpvue 小程序如何自定義tabBar，不使用navigateTo跳轉，模擬redirectTo跳轉

時間 2019-11-08

標籤 mpvue 程序如何自定義 tabbar 不使 navigateto 模擬 redirectto 简体版

原文原文鏈接

原生tabBar

tabBar: {
  "list": [
    {
      pagePath: "pages/index/main",
      iconPath: "/static/images/index-default.png",
      selectedIconPath: "/static/images/index-active.png",
      text: "首頁"
    },
    {
      pagePath: "pages/orderList/main",
      iconPath: "/static/images/order-default.png",
      selectedIconPath: "/static/images/order-active.png",
      text: "訂單"
    },
    {
      pagePath: "pages/notice/main",
      iconPath: "/static/images/icon-notice-default.png",
      selectedIconPath: "/static/images/icon-notice-active.png",
      text: "預告"
    },
    {
      pagePath: "pages/user/main",
      iconPath: "/static/images/person-default.png",
      selectedIconPath: "/static/images/person-active.png",
      text: "我的"
    }
  ],
}

自定義tabBar

效果圖1：若是須要添加按鈕css

效果2 若是不須要按鈕vue

在組件文件新建一個vueTabBar.vuegit

<template>
  <section class="tabBar-wrap">
    <article class="tabBar-box">
      <ul class="tabBar-nav" v-if="navList.length > 0">
        <li class="item" v-for="(item, index) in navList"
            @click="selectNavItem(index,item.pagePath)"
            :key="index">
          <p class="item-images">
            <img :src="selectNavIndex === index ? item.selectedIconPath : item.iconPath" alt="iconPath">
          </p>
          <p :class="selectNavIndex === index ? 'item-text item-text-active' : 'item-text' ">
            {{item.text}}
          </p>
        </li>
        <li v-if="needButton" style="flex: 3">
          <div class="submit-box">
            <button :disabled="!handButton"
                    @click="bindNavigateTo('../order/main')"
                    :class="handButton ? 'submit-box-btn submit-box-btn-active' : 'submit-box-btn' ">
              {{ btnText }}
            </button>
          </div>
        </li>
      </ul>
    </article>
  </section>
</template>

js處理

<script>
  import store from '../vuex/index'

  export default {
    props: ['selectNavIndex', 'needButton', 'handButton', 'btnText'],
    data() {
      return {
        navList: [
          {
            pagePath: "../index/main",
            iconPath: "/static/images/index-default.png",
            selectedIconPath: "/static/images/index-active.png",
            text: "首頁"
          },
          {
            pagePath: "../orderList/main",
            iconPath: "/static/images/order-default.png",
            selectedIconPath: "/static/images/order-active.png",
            text: "訂單"
          },
          {
            pagePath: "../notice/main",
            iconPath: "/static/images/icon-notice-default.png",
            selectedIconPath: "/static/images/icon-notice-active.png",
            text: "預告"
          },
          {
            pagePath: "../user/main",
            iconPath: "/static/images/person-default.png",
            selectedIconPath: "/static/images/person-active.png",
            text: "我的"
          }
        ],
      }
    },
    created() {
    },
    methods: {
      /**
       * 點擊導航欄
       * @param index
       */
      selectNavItem(index, pagePath) {
        console.log(this.selectNavIndex)

        if (index === this.selectNavIndex) {
          return false;
        }


        if (index == 0 && this.selectNavIndex == -1) {
          this.$emit("fetch-index");
        }
        this.bindViewTap(pagePath);
      },

      /**
       * 路由跳轉
       */
      bindNavigateTo(url) {
        wx.navigateTo({
          url
        })
      },

      /**
       * tabBar路由跳轉
       */
      bindViewTap(url) {
        // 回到頂部
        if (url === '../index/main') {
          store.commit('setGroupsID', '');
        }
        wx.switchTab({
          url,
        })
      },
    }
  }
</script>

css

<style lang="less" scoped>
  .tabBar-box {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 80px;
    padding: 20px 0;
    border-top: 1px solid #eee;
    background-color: #f8f8f8;
  }

  .tabBar-nav {
    width: 100%;
    display: flex;

    .item {
      flex: 1;
      text-align: center;
    }
    .item-text {
      color: #666;
      font-size: 28px;
      transition: .24s linear;
    }
    .item-text-active {
      color: #27a79a;
    }

    .item-images {
      width: 48px;
      height: 48px;
      margin: 0 auto;
      text-align: center;
      transition: .24s linear;

      & img {
        display: inline;
        width: 100%;
        height: 100%;
      }
    }
  }

  .submit-box-btn {
    position: relative;
    z-index: 999;
    width: 85%;
    height: 90px;
    line-height: 90px;
    border-radius: 10px;
    color: #404040;
    font-size: 36px;
    border: none;
    background-color: #eee;
    text-align: center;
    border: 1px solid #eee;
  }

  .submit-box-btn-active {
    color: #fff;
    border: none;
    border: 1px solid #ff6c00;
    background-color: #ff6c00;
  }

  button {
    border: none;
    outline: none;
  }
</style>

特別說明：你copy下拉，icon圖片你肯定路徑對，建議 81 * 81，微信小程序推薦的，

第二：你引入組件就能夠使用

import vueTabBar from '../../components/vueTabBar'

components: {
  vueTabBar
},

<vue-tab-bar
  @fetch-index="clickIndexNav"
  :selectNavIndex=selectNavIndex
  :needButton="needButton"
  :handButton="handButton"
  :btnText="btnText">
</vue-tab-bar>

selectNavIndex: 是須要高亮的下標
needButton： 是否顯示添加的按鈕（看效果圖，就是有顏色的按鈕）
handButton：控制有顏色的按鈕方法
btnText： 按鈕文字

第三個: 由於tabBar使用跳轉的方法是

wx.switchTab({
  url,
})

我在所有的main.js windo同樣是配置tabBar的

tabBar: {
  "list": [
    {
      pagePath: "pages/index/main",
      iconPath: "/static/images/index-default.png",
      selectedIconPath: "/static/images/index-active.png",
      text: "首頁"
    },
    {
      pagePath: "pages/orderList/main",
      iconPath: "/static/images/order-default.png",
      selectedIconPath: "/static/images/order-active.png",
      text: "訂單"
    },
    {
      pagePath: "pages/notice/main",
      iconPath: "/static/images/icon-notice-default.png",
      selectedIconPath: "/static/images/icon-notice-active.png",
      text: "預告"
    },
    {
      pagePath: "pages/user/main",
      iconPath: "/static/images/person-default.png",
      selectedIconPath: "/static/images/person-active.png",
      text: "我的"
    }
  ],
}