nav-bottom

App.vue

@@ -16,4 +16,5 @@ export default {
 @import 'colorui/main.scss';
 @import 'colorui/icon.scss';
 @import 'colorui/animation.scss';
+@import 'common/style/global';
 </style>

common/style/global.scss

@@ -0,0 +1,3 @@
+.cc-active {
+  transform: translate3d(1rpx, 1rpx, 0);
+}

components/nav-bottom/nav-bottom.vue

@@ -0,0 +1,42 @@
+<template>
+  <view class="cu-bar tabbar bg-white">
+    <view
+      :class="[index === 0 ? 'text-blue': 'text-gray']"
+      @tap="handleClickButton(0)"
+      class="action"
+      hover-class="cc-active"
+    >
+      <view class="cuIcon-home"></view>首页
+    </view>
+    <view @tap="handleClickButton(1)" class="action text-gray add-action">
+      <button class="cu-btn cuIcon-scan bg-blue shadow"></button>
+      扫一扫
+    </view>
+    <view
+      :class="[index === 2 ? 'text-blue': 'text-gray']"
+      @tap="handleClickButton(2)"
+      class="action"
+      hover-class="cc-active"
+    >
+      <view class="cuIcon-my">
+        <!-- <view class="cu-tag badge"></view> -->
+      </view>我的
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      index: 0,
+    };
+  },
+  methods: {
+    handleClickButton(i) {
+      this.index = i;
+      this.$emit('change', i);
+    },
+  },
+};
+</script>

pages/index/components/home.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>home</div>
+</template>
+
+<script>
+export default {
+  name: 'Home',
+};
+</script>

pages/index/components/mine.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>user</div>
+</template>
+
+<script>
+export default {
+  name: 'Mine',
+};
+</script>

pages/index/index.vue

@@ -1,52 +1,67 @@
 <template>
-	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
-	</view>
+  <view class="container">
+    <view class="content">
+      <home v-if="navIndex === 0" />
+      <mine v-else />
+    </view>
+    <nav-bottom @change="onNavChange" class="nav-bottom"></nav-bottom>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				title: 'Hello'
-			}
-		},
-		onLoad() {
+import Home from './components/home.vue';
+import Mine from './components/mine.vue';
 
-		},
-		methods: {
+export default {
+  components: { Home, Mine },
+  data() {
+    return {
+      navIndex: 0,
+    };
+  },
+  onLoad() {},
+  methods: {
+    /**
+     * 监听nav-bottom的点击事件
+     * @param {number} index nav-bottom按钮的索引值
+     */
+    onNavChange(index) {
+      this.navIndex = index;
+      switch (index) {
+        // 扫一扫
+        case 1:
+          this.handleScan();
+          break;
+        // 我的
+        case 2:
+          break;
+        // 首页
+        default:
+          break;
+      }
+    },
 
-		}
-	}
+    // 扫一扫
+    handleScan() {
+      console.log('扫一扫');
+    },
+  },
+};
 </script>
 
-<style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
+<style scoped lang="scss">
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
 
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
-	}
-</style>
+  .content {
+    flex: 1;
+  }
+  .nav-bottom {
+    width: 100%;
+  }
+}
+</style>