首页导航

src/App.vue

@@ -26,4 +26,8 @@
       font-size: 28rpx;
       color: #666;
     }
+    image{
+      /* 宽度等于父盒子的宽度, 才不会主动撑开 */
+      Width:100%;
+    }
 </style>

src/pages/index/index.vue

@@ -10,6 +10,14 @@
       <u-swiper :list="swiperList" height="340" border-radius="0"></u-swiper>
     </view>
 
+    <!-- 3. 导航 -->
+    <view class="nav">
+      <navigator class="nav_item" v-for="item in catitems" :key="item.image_src">
+        <image :src="item.image_src" mode="widthFix"></image>
+        <!-- widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 -->
+      </navigator>
+    </view>
+
 	</view>
 </template>
 
@@ -17,12 +25,16 @@
 	export default {
 		data() {
 			return {
-        swiperList: []
+        swiperList: [],
+        catitems: []
 			}
     },
     // 页面生命周期
 		onLoad() {
-      this.getSwiper();
+      // 获取轮播图
+      this.getSwiper()
+      // 获取导航图
+      this.getCatitems()
 		},
 		methods: {
       // getSwiper(){
@@ -32,15 +44,23 @@
       //     })
       // }
 
+      // 轮播图
       async getSwiper(){
         const { message } = await this.$u.api.getSwiperdata()
         this.swiperList = message.map(v=>({...v,image:v.image_src}))
-		  }
+      },
+
+      // 导航
+      async getCatitems(){
+        const { message } = await this.$u.api.getCatitems()
+        this.catitems = message
+      }
 		}
 	}
 </script>
 
 <style lang="scss">
+  /* 搜索 */
   .search {
     /* 
     设计稿375px
@@ -53,4 +73,14 @@
     轮播图750px宽, 340px高
      */
   }
+
+  /* 导航 */
+  .nav {
+    display: flex;
+    .nav_item { 
+      flex: 1;
+      padding: 20rpx;
+    }
+  }
+
 </style>