邓洁 : 自定义tabbar

App.vue

@@ -1,3 +1,6 @@
+<template>
+	<TabBar></TabBar>
+</template>
 <script>
 	export default {
 		onLaunch: function() {
@@ -14,4 +17,4 @@
 
 <style>
 	/*每个页面公共css */
-</style>
+</style>

components/TabBar/TabBar.vue

@@ -0,0 +1,157 @@
+<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/tabbar/di_icon_syh.png",
+					selectIcon: "/static/tabbar/di_icon_sy.png",
+					text: "首页",
+					centerItem: false
+				}, {
+					id: 1,
+					path: "/pages/shopTransfer/shopTransfer",
+					icon: "/static/tabbar/di_icon_zrh.png",
+					selectIcon: "/static/tabbar/di_icon_zr.png",
+					text: "店铺转让",
+					centerItem: false
+				}, {
+					id: 2,
+					path: "/pages/publish/publish",
+					icon: "/static/tabbar/di_icon_fb@2x.png",
+					selectIcon: "/static/tabbar/di_icon_fb@2x.png",
+					text: "发布",
+					centerItem: true
+				}, {
+					id: 3,
+					path: "/pages/shopAddress/shopAddress",
+					icon: "/static/tabbar/di_icon_dzh.png",
+					selectIcon: "/static/tabbar/di_icon_dz.png",
+					text: "找店地址",
+					centerItem: false
+				}, {
+					id: 4,
+					path: "/pages/my/my",
+					icon: "/static/tabbar/di_icon_wdh.png",
+					selectIcon: "/static/tabbar/di_icon_wd.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: 98rpx;
+		display: flex;
+		align-items: center;
+		/* padding: 5rpx 0; */
+		color: #999999;
+		z-index: 200;
+		background-color: #fff;
+	}
+
+	.tabbar-container .tabbar-item {
+		width: 20%;
+		height: 82rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
+	}
+
+	.tabbar-container .item-active {
+		color: #339967;
+	}
+
+	.tabbar-container .center-item {
+		display: block;
+		position: relative;
+	}
+
+	.tabbar-container .tabbar-item .item-top {
+		width: 46rpx;
+		height: 46rpx;
+		padding: 0rpx;
+	}
+
+	.tabbar-container .center-item .item-top {
+		flex-shrink: 0;
+		width: 100rpx;
+		height: 100rpx;
+		position: absolute;
+		top: -61rpx;
+		left: calc(50% - 50rpx);
+		border-radius: 50%;
+	}
+
+	.tabbar-container .tabbar-item .item-top image {
+		width: 100%;
+		height: 100%;
+	}
+
+	tabbar-container .tabbar-item:nth-child(3) .item-top image {
+		background: #ff0000;
+	}
+
+	.tabbar-container .tabbar-item .item-bottom {
+		font-size: 20rpx;
+		width: 100%;
+		margin-top: 3rpx;
+	}
+
+	.tabbar-container .center-item .item-bottom {
+		position: absolute;
+		bottom: 5rpx;
+	}
+</style>

main.js

@@ -6,7 +6,6 @@ import {
 	toast
 } from "./service/request.js"
 Vue.use(uView)
-
 Vue.prototype.$api = apiService
 Vue.prototype.$toast = toast
 

manifest.json

@@ -55,11 +55,7 @@
             "urlCheck" : false
         },
         "usingComponents" : true,
-        "permission" : {
+        "permission" : {}
-            "scope.userLocation" : {
-                "desc" : ""
-            }
-        }
     },
     "mp-alipay" : {
         "usingComponents" : true

pages.json

@@ -59,9 +59,9 @@
 	],
 	"tabBar": {
 		"color": "#CCCCCC",
-		"selectedColor": "#0EBB5B",
 		"borderStyle": "white",
 		"backgroundColor": "#FFFFFF",
+		"custom":true,
 		"list": [{
 				"pagePath": "pages/index/index",
 				"text": "首页",

pages/index/index.vue

@@ -1,6 +1,7 @@
 <template>
 	<view>
-		<inputAndSwiper></inputAndSwiper>
+		<InputAndSwiper></InputAndSwiper>
+		<TabBar :current-page="0"></TabBar>
 	</view>
 </template>
 
@@ -18,7 +19,7 @@
 	}
 </script>
 <style>
-	page{
+	page {
 		background-color: #F8F8F8;
 	}
 </style>

pages/my/my.vue

@@ -1,6 +1,7 @@
 <template>
 	<view>
 		我的
+		<TabBar :current-page="4"></TabBar>
 	</view>
 </template>
 

pages/publish/publish.vue

@@ -1,6 +1,7 @@
 <template>
 	<view>
 		发布
+		<TabBar :current-page="2" />
 	</view>
 </template>
 

pages/shopAddress/shopAddress.vue

@@ -1,6 +1,7 @@
 <template>
 	<view>
 		找店地址
+		<TabBar :current-page="3"></TabBar>
 	</view>
 </template>
 

pages/shopTransfer/shopTransfer.vue

@@ -1,6 +1,7 @@
 <template>
 	<view>
 		店铺转让
+		<TabBar :current-page="1"></TabBar>
 	</view>
 </template>