【小程序】mpx实现自定义tabbar

gengboxb 19 0

1、为什么

为什么使用自定义tabbar,因为小程序tababr存在局限性,为了满足自身开发的tabbar需求,使用使用自定义tabbar

2、实现

(1)在pages根目录创建custom-tab-bar文件夹

(2)custom-tab-bar文件夹创建index.mpx(注意文件夹名字和文件名固定不变)

<template>
<cover-view class='tab-bar'>
    <!-- 背景一条线 -->
    <cover-view class='tab-bar-bg-view'/>
    <!-- 背景图片 -->
    <!-- <cover-image class='tab-bar-bg' src='/pages/resource/image/tab-bar-image/tab_bar_bg.png'/> -->
    
    <!-- 发现 -->
    <cover-view class='tab-bar-index' data-index='0' data-path='{{list[0].pagePath}}' bindtap='tab_bar_index'>
      <cover-view class='tab-bar-icon'>
        <cover-image src='{{selected == 0 ? list[0].selectedIconPath : list[0].iconPath}}' class='tab-bar-img'/>
        <cover-view class='tab-bar-tmp'/>
        <cover-view class='tab-bar-text' style='color:{{selected == 0 ? selectedColor : color}}'>发现</cover-view>
      </cover-view>
    </cover-view>

    <!-- 专栏 -->
    <!-- <cover-view class='tab-bar-index' data-index='1' data-path='{{list[1].pagePath}}' bindtap='tab_bar_index'>
      <cover-view class='tab-bar-icon'>
        <cover-image src='{{selected == 1 ? list[1].selectedIconPath : list[1].iconPath}}' class='tab-bar-img'/>
        <cover-view class='tab-bar-tmp'/>
        <cover-view class='tab-bar-text' style='color:{{selected == 1 ? selectedColor : color}}'>专栏</cover-view>
      </cover-view>
    </cover-view> -->

    <!-- 发布 -->
    <!-- <cover-view class='tab-bar-index-add' bindtap='tab_bar_add'>
      <cover-view class='tab-bar-icon_add'>
        <cover-view style='width:100%;height:3px;'/>
        <cover-image class='tab-bar-img-add' src='{{addImgPath}}'/>
      </cover-view>
    </cover-view> -->

    <!-- 通知 -->
    <cover-view class='tab-bar-index' data-index='1' data-path='{{list[1].pagePath}}' bindtap='tab_bar_index'>
      <cover-view class='tab-bar-icon'>
        <cover-image src='{{selected == 1 ? list[1].selectedIconPath : list[1].iconPath}}' class='tab-bar-img'/>
        <cover-view class='tab-bar-tmp'/>
        <cover-view class='tab-bar-text' style='color:{{selected == 1 ? selectedColor : color}}'>通知</cover-view>
      </cover-view>
    </cover-view>

    <!-- 我的 -->
    <cover-view class='tab-bar-index' data-index='2' data-path='{{list[2].pagePath}}' bindtap='tab_bar_index'>
      <cover-view class='tab-bar-icon'>
        <cover-image src='{{selected == 2 ? list[2].selectedIconPath : list[2].iconPath}}' class='tab-bar-img'/>
        <cover-view class='tab-bar-tmp'/>
        <cover-view class='tab-bar-text'  style='color:{{selected == 2 ? selectedColor : color}}'>我的</cover-view>
      </cover-view>
    </cover-view>

</cover-view>
</template>

<!--<script src="../../utils/util.js"></script>-->
<script>
import { createComponent } from '@mpxjs/core'
// import store from '../../store'
// const xfetch = require('../../server/xfetch.js')
// const util = require('../../utils/util.js')

createComponent({
  // 数据
  data: {
    selected: 0, // 当前tabBar页面
    color: '#cdcdcd', // 未选中tabBar时的文字颜色
    selectedColor: '#22385d', // 选中时tabBar文字颜色
    addImgPath: '/pages/resource/image/tab-bar-image/add.png', // 添加发布图标
    // tabBar对象集合
    list: [
      {
        pagePath: '/pages/index',
        iconPath: '/assets/home310b15ababe35a7e94f6dbd27dc2c4e2.png',
        selectedIconPath: '/assets/home-activea39cb1253540e268f8f4653d7f71e107.png',
        text: '首页'
      },
      // {
      //   pagePath: '/pages/index',
      //   iconPath: '/assets/home.png',
      //   selectedIconPath: '/assets/home-active.png',
      //   text: '专栏'
      // },
      {
        pagePath: '/components/common/Verification/Verification',
        iconPath: '/assets/message6f45b6b12494e9f099be7fde369d90df.png',
        selectedIconPath: '/assets/message-active1856dd6eb05c3b970bdcb9b06be5b635.png',
        text: '消息'
      },
      {
        pagePath: '/components/login/login',
        iconPath: '/assets/profile8357f4ffa2babc1f327b9d41e128ae01.png',
        selectedIconPath: '/assets/profile-active8da73c92095df8a7e109a761f213f0cf.png',
        text: '我的'
      }
    ]
  },
  methods: {
    // tabBar切换事件
    tab_bar_index (e) {
      const url = e.currentTarget.dataset.path
      wx.switchTab({ url })
    },

    // 发布添加按钮跳转
    tab_bar_add () {
      var url = '/pages/tab-add/add'
      wx.navigateTo({ url })
    }
  }
})
</script>
<style lang="stylus">
.tab-bar{
  width: 100%;
  height: 70px;
  display: flex;
  flex-direction: row;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

}
/*背景图片 */
.tab-bar-bg{
  display: flex;
  position: absolute;
  width: 100%;
  height: 70px;
  z-index: -1;
}
/* 背景一条线 */
.tab-bar-bg-view{
  width: 100%;
  height: 1px;
  background:  rgba(0, 0, 0, 0.33);
  position: absolute;
  top: 17px;
  z-index: -1;
}
/* tabBar内容快 */
.tab-bar-index{
  display: flex;
  flex: 1;
  font-size: 30rpx;
  height: 50px;
  margin-top: 20px;
  z-index: 1;
  background:#fff;
}
/* tarBar添加发布单独内容快 */
.tab-bar-index-add{
  display: flex;
  flex: 1;
  font-size: 30rpx;
  z-index: 1;
  height: 70px;
}
/* 图标字体结合内容快 */
.tab-bar-icon{
  width: 100%;
  height: 45px;
  margin-top: 5px;
  display: flex;
  flex-direction: column;
}
/* 图标字体结合内容快添加发布单独设置 */
.tab-bar-icon_add{
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: column;
}
/* 内容快图片 */
.tab-bar-img{
  width: 25px;
  height: 25px;
  margin: 0 auto;
}
/* 内容快添加发布单独图片设置 */
.tab-bar-img-add{
  width: 50px;
  height: 50px;
  margin: 0 auto;
}
/* 内容快挤位置 */
.tab-bar-tmp{
  width: 100%;
  height: 3.5px;
}
/* 内容快文字 */
.tab-bar-text{
  width: 40px;
  text-align: center;
  font-size: 12px;
  margin: 0 auto;
}
</style>

<script type="application/json">
  {
    "component": true
  }
</script>

(3)在app.mpx 的json配置tabbar 添加"custom":true,(注意list的对象个数需要和index.mpx的一致)

    "tabBar": {
    "custom":true,
    "color": "#999",
    "selectedColor": "#444",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index",
        "text": "首页",
        "iconPath": "assets/home.png",
        "selectedIconPath": "assets/home-active.png"
      },
      {
        "pagePath": "components/common/Verification/Verification",
        "text": "消息",
        "iconPath": "assets/message.png",
        "selectedIconPath": "assets/message-active.png"
      },
      {
        "pagePath": "components/login/login",
        "text": "我的",
        "iconPath": "assets/profile.png",
        "selectedIconPath": "assets/profile-active.png"
      }
    ],
    "position": "bottom"
  },

3、解决

注意就实现了mpx的自定义tabbar

发表评论 取消回复
表情 图片 链接 代码

分享
微信
微博
QQ