uniapp自定义tabbar,中间凸起(支持H5、微信小程序)

简介: uniapp自定义tabbar,中间凸起(支持H5、微信小程序)

最近公司需要做一款app,需要中间按钮凸起,在网上找了一些,参考文献,做了一个demo;

H5效果图如下:

20210527153548522.png

小程序效果图如下:

20210527153548522.png

目录结构如下:

20210527153548522.png

page.json的配置如下:

{
  "pages": [{
    "path": "pages/index/index",
    "style": {
      "navigationBarTitleText": "简介"
    }
  }, {
    "path": "pages/discount/discount",
    "style": {
      "navigationBarTitleText": "优惠"
    }
  }, {
    "path": "pages/code/code",
    "style": {
      "navigationBarTitleText": "二维码"
    }
  }, {
    "path": "pages/search/search",
    "style": {
      "navigationBarTitleText": "探索"
    }
  }, {
    "path": "pages/mine/mine",
    "style": {
      "navigationBarTitleText": "我的"
    }
  }],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "CRM",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8",
    "app-plus": {
      "background": "#efeff4"
    }
  },
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#f00",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "midButton":{
      "text":"二维码",
      "pagePath":"pages/code/code",
      "iconPath":"static/code.png",
      "selectedIconPath":"static/codeSelected.png"
    },
    "list":[
      {
        "pagePath":"pages/index/index",
        "iconPath":"static/home.png",
        "selectedIconPath":"static/homeSelected.png",
        "text":"简介"
      },
      {
        "pagePath":"pages/discount/discount",
        "iconPath":"static/gift.png",
        "selectedIconPath":"static/giftSelected.png",
        "text":"优惠"
      },
      {
        "pagePath":"pages/code/code",
        "iconPath":"static/code.png",
        "selectedIconPath":"static/codeSelected.png",
        "text":"二维码"
      },
      {
        "pagePath":"pages/search/search",
        "iconPath":"static/search.png",
        "selectedIconPath":"static/searchSelected.png",
        "text":"探索"
      },
      {
        "pagePath":"pages/mine/mine",
        "iconPath":"static/mine.png",
        "selectedIconPath":"static/mineSelected.png",
        "text":"我的"
      }
    ]
  }
}

注册全局组件tabbar在main.js文件中,配置如下:

import Vue from 'vue'
import App from './App'
import zdyTabbar from "components/zdy-tabbar.vue"
// 注册全局组件
Vue.component('zdy-tabbar', zdyTabbar)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()

zdy-tabbar.vue文件编写:

<template>
  <view class="tabbar-container">
    <block>
      <view class="tabbar-item" v-for="(item, index) in tabbarList" :class="[item.centerItem ? ' center-item' : '']" @click="changeItem(item)">
        <view class="item-top"><image :src="currentItem == item.id ? item.selectIcon : item.icon"></image></view>
        <view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
          <text>{{ item.text }}</text>
        </view>
      </view>
    </block>
  </view>
</template>
<script>
export default {
  props: {
    currentPage: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentItem: 0,
      tabbarList: [
        {
          id: 0,
          path: '/pages/index/index',
          icon: '/static/home.png',
          selectIcon: '/static/homeSelected.png',
          text: '简介',
          centerItem: false
        },
        {
          id: 1,
          path: '/pages/discount/discount',
          icon: '/static/gift.png',
          selectIcon: '/static/giftSelected.png',
          text: '优惠',
          centerItem: false
        },
        {
          id: 2,
          path: '/pages/code/code',
          icon: '/static/code.png',
          selectIcon: '/static/codeSelected.png',
          text: '二维码',
          centerItem: true
        },
        {
          id: 3,
          path: '/pages/search/search',
          icon: '/static/search.png',
          selectIcon: '/static/searchSelected.png',
          text: '探索',
          centerItem: false
        },
        {
          id: 4,
          path: '/pages/mine/mine',
          icon: '/static/mine.png',
          selectIcon: '/static/mineSelected.png',
          text: '我的',
          centerItem: false
        }
      ]
    };
  },
  mounted() {
    this.currentItem = this.currentPage;
    uni.hideTabBar();
  },
  methods: {
    changeItem(item) {
      let _this = this;
      //_this.currentItem = item.id;
      uni.switchTab({
        url: item.path
      });
    }
  }
};
</script>
<style>
view {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.tabbar-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 110rpx;
  box-shadow: 0 0 5px #999;
  display: flex;
  align-items: center;
  padding: 5rpx 0;
  color: #999999;
}
.tabbar-container .tabbar-item {
  width: 20%;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.tabbar-container .item-active {
  color: #f00;
}
.tabbar-container .center-item {
  display: block;
  position: relative;
}
.tabbar-container .tabbar-item .item-top {
  width: 70rpx;
  height: 70rpx;
  padding: 10rpx;
}
.tabbar-container .center-item .item-top {
  flex-shrink: 0;
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  top: -50rpx;
  left: calc(50% - 50rpx);
  border-radius: 50%;
  box-shadow: 0 0 5px #999;
  background-color: #ffffff;
}
.tabbar-container .tabbar-item .item-top image {
  width: 100%;
  height: 100%;
}
.tabbar-container .tabbar-item .item-bottom {
  font-size: 28rpx;
  width: 100%;
}
.tabbar-container .center-item .item-bottom {
  position: absolute;
  bottom: 5rpx;
}
</style>

所有的tabbar页面引入自定义tabbar:

<zdy-tabbar :current-page="0"></zdy-tabbar>

20210527153548522.png

20210527153548522.png

20210527153548522.png

20210527153548522.png

20210527153548522.png

目录
打赏
0
0
0
1
3
分享
相关文章
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
45 0
uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
114 8
uni app下开发AI运动小程序解决方案
本文介绍了在小程序中实现AI运动识别的解决方案。该方案依托于UNI平台,通过高效便捷的插件形式,实现包括相机抽帧控制、人体识别、姿态识别等在内的多项功能,无需依赖后台服务器,大幅提高识别效率和用户体验。方案内置多种运动模式,支持自定义扩展,适用于AI健身、云上赛事、AI体测等多场景,适合新开发和存量改造项目。
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
173 3
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
93 0
在线课堂+工具组件小程序uniapp移动端源码
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
632 3
|
5月前
|
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
911 1
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
150 0
微信小程序:自定义关注公众号组件样式
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
50 0
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
166 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等