学会服务站建站方案/哪个推广网站好

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

H5效果图如下：

小程序效果图如下： 

目录结构如下：

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 = falseApp.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>