底部导航栏的制作，实战代码完整复现！

前端

2023-10-30 04:43:19

一、素材准备

由于底部导航栏有图片，所以我们需要找素材。我们在阿里巴巴图标库中找到了 4 个图标，分别对应首页、分类、购物车和个人模块。

二、创建项目

打开 uni-app IDE，创建一个新的项目。在项目中，创建一个名为 pages/index/index.vue 的文件，这是我们主页面的 Vue 组件。

三、引入图标

将您从阿里巴巴图标库中下载的图标复制到项目的 static 目录中。

四、制作底部导航栏

在 pages/index/index.vue 文件中，添加以下代码：

<template>
  <view>
    <uni-nav-bar fixed="true" backgroundColor="#ffffff">
      <uni-nav-bar-item>
        <view class="nav-item" @click="goHome">
          <image src="/static/home.png"></image>
          <text>首页</text>
        </view>
      </uni-nav-bar-item>
      <uni-nav-bar-item>
        <view class="nav-item" @click="goCategory">
          <image src="/static/category.png"></image>
          <text>分类</text>
        </view>
      </uni-nav-bar-item>
      <uni-nav-bar-item>
        <view class="nav-item" @click="goCart">
          <image src="/static/cart.png"></image>
          <text>购物车</text>
        </view>
      </uni-nav-bar-item>
      <uni-nav-bar-item>
        <view class="nav-item" @click="goPersonal">
          <image src="/static/personal.png"></image>
          <text>个人</text>
        </view>
      </uni-nav-bar-item>
    </uni-nav-bar>
  </view>
</template>

<script>
export default {
  methods: {
    goHome() {
      uni.navigateTo({
        url: '/pages/home/home'
      })
    },
    goCategory() {
      uni.navigateTo({
        url: '/pages/category/category'
      })
    },
    goCart() {
      uni.navigateTo({
        url: '/pages/cart/cart'
      })
    },
    goPersonal() {
      uni.navigateTo({
        url: '/pages/personal/personal'
      })
    }
  }
}
</script>

<style scoped>
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25%;
  height: 100%;
}

.nav-item image {
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
}

.nav-item text {
  font-size: 12px;
}
</style>