mpvue 小程序如何自定义tabBar,不使用navigateTo跳转,模拟redirectTo跳转

2018-05-25 admin

原生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

[转载]原文链接:https://segmentfault.com/a/1190000015027980

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-33004.html

文章标题:mpvue 小程序如何自定义tabBar,不使用navigateTo跳转,模拟redirectTo跳转

相关文章
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
零基础-5小时开发一个electron应用-[实践]
一、背景 三、技能升级 ​ 明明可以用颜值取胜,非要靠才华?不对,明明可以用代码搞定,非要搞设计?步入正题,正好最近对electron比较感兴趣,又是要做工具,那就直接怼 1.electron介绍 ​ electron最开始不叫这个名字,叫...
2017-12-26
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
Bootstrap BootstrapDialog使用详解
这里有两种展现方式 写在前面:首先你要引入的库有 css : bootstrap.min.css bootstrap-dialog.css js : jquery-1.11.1.min.js bootstrap.min.js bootstr...
2017-03-16
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
回到顶部