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
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
173 3
uniapp中使用videojs构建H5直播播放器
【10月更文挑战第14天】这两天在开发H5直播带货功能模块,使用原生的video播放器播放不了m3u8的流地址,于是找了videojs,参考了网上的一些资料研究了一下,感觉还不错,videojs播放m3u8流地址还挺稳定的,下面就简单记录一下uniapp里面使用方式
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
632 3
uniapp环境H5运行及发行(入门必学)
uniapp环境H5运行及发行(入门必学)
440 5
|
5月前
|
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
104 0
微信小程序更新提醒uniapp
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
94 2
uniapp富文本editor输入二次扩展兼容微信小程序
uniapp富文本editor输入二次扩展兼容微信小程序
176 0
重磅更新-UniApp自定义字体可视化设计
重磅更新-UniApp自定义字体可视化设计
107 0

热门文章

最新文章