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:如果需要添加按钮

效果2 如果不需要按钮

在组件文件新建一个vueTabBar.vue

<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: "个人"
    }
  ],
}

一定要记住在onSow的方法要隐藏掉原生的tabBar,

wx.hideTabBar()

这样可以达到原生的99%,至少不用navigateTo,有返回键,体验度很差,喜欢的去我的GitHub,thanks!

我的GitHub博客,很多内容可以看,喜欢的给星星哦 https://github.com/liangfengbo/frontend

原文链接:segmentfault.com

上一篇:cubism
下一篇:animateplus

相关推荐

  • 页面跳转的归纳

    前端工作有很多地方需要页面跳转,有很多种实现方法,这里做一下归纳。 HTML标签 一般形式上可以用target="blank": 历史跳转 ...

    2 年前
  • 页面跳转时,点击上报丢失问题解析

    背景 最近在工作中,遇到了页面跳转时点击上报丢失的问题,突出表现在微信ios的webview上,上报后直接跳转的失败率达到了惊人的93%。喝口水压压惊,开始逐步分析问题的发生。

    2 年前
  • 页面跳转中的安全问题

    最近参与了一小部分安全排查,涉及到一些前端编码安全问题,记个小tip。 1.Http请求头中的Referer 0a2b525c5fc64af362821115x362.png@900090f.p...

    7 个月前
  • 页面之间传值之url传值-实现点击携参跳转到详情页

    概念图 js实现页面事件url传参,详情页拿到参数.png(https://img.javascriptcn.com/271c63fa5880b64087d507fd62f1d5bd "js实现页...

    2 年前
  • 面板拖拽之vue自定义指令

    前言 在指令里获取的this并不是vue对象,vnode.context才是vue对象,一般来说,指令最好不要访问vue上的data,以追求解耦,但是可以通过指令传进来的值去访问method或re...

    1 年前
  • 钉钉小程序 之 自定义组件的使用,以及父组件与子组件(自定义组件)传值

    目录: 本机环境 自定义组件(子组件) 页面中引入(父组件引入子组件) 父组件(使用自定义组件的页面)传值给子组件 子组件(自定义组件)传值给父组件 备注 一、本机环境 二、自定义组件(子...

    2 个月前
  • 采用shell自定义脚本,控制集成部署环境更加方便灵活

    Jenkins 是一个开源软件项目,旨在提供一个开放易用的软件平台,使软件的持续集成变得可能。现在软件开发追求的是效率以及质量,Jenkins使得自动化成为可能! 亮点 采用shell自定义脚本,控...

    1 年前
  • 逻辑强化系列(一):彻底搞懂自定义组件使用 v-model

    前言 阅读本文前,希望你已经彻底理解了语法糖 vmodel 以及父子组件之间的通讯方法 vmodel 在组件上使用 vmodel 之前首先要知道,vmodel 的用处以及实际操作流程,以方便理解,而不...

    1 个月前
  • 通过字符串var [复制]获得自定义对象属性

    CommunityJayNicolas Hackleman(https://stackoverflow.com/users/1/community)提出了一个问题:Getting a Custom O...

    2 年前
  • 通过nodejs实现自定义命令

    我们开发用到的一些库都有自己特有的命令,如webpack,babel和jest等。通过给这些命令输入不同的参数,可以得到相应的功能。通过篇文章,你将学会如何一步步地编写运行在弄的环境的自定义命令。

    3 年前

官方社区

扫码加入 JavaScript 社区