微信公众号h5 微信小程序都可以用的底部导航栏，基础uview-ui 封装的底部导航栏组件

最新推荐文章于 2025-04-08 15:50:14 发布

一见钟琴009

最新推荐文章于 2025-04-08 15:50:14 发布

阅读量498

点赞数 2

文章标签：微信小程序小程序 uni-app ui

本文链接：https://blog.youkuaiyun.com/weixin_70811193/article/details/136535099

版权

本文介绍了如何在Vue项目中安装并使用uview-ui库，重点展示了如何创建带有点击事件的tabbar组件，以及如何在页面间进行导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装uview-ui

npm install uview-ui@2.0.36

2.项目中创建组件

<template>
  <view>
    <u-tabbar
      :value="name"
      :fixed="true"
      :placeholder="false"
      activeColor="#d81e06"
      :safeAreaInsetBottom="false"
      :activeColor="'#F85252'"
      :inactiveColor="'#BFBFBF'"
      :border="false"
      z-index="9"
    >
      <u-tabbar-item text="首页" name="Home" @click="goPage('userindex')">
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          style="width: 50rpx; height: 50rpx"
          src="../../static/usericon/5.png"
        ></image>
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          style="width: 50rpx; height: 50rpx"
          src="../../static/usericon/4.png"
        >
        </image>
      </u-tabbar-item>
      <u-tabbar-item
        text="商户"
        name="Technician"
        @click="goPage('usertechnician')"
      >
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          style="width: 50rpx; height: 50rpx"
          src="../../static/usericon/6.png"
        ></image>
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          style="width: 50rpx; height: 50rpx"
          src="../../static/usericon/3.png"
        >
        </image>
      </u-tabbar-item>
      <u-tabbar-item text="订单" name="Oder" @click="goPage('useroder')">
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          style="width: 50rpx; height: 50rpx"
          src="../../static/usericon/7.png"
        ></image>
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          style="width: 50rpx; height: 50rpx"
          src="../../static/usericon/2.png"
        >
        </image>
      </u-tabbar-item>
      <u-tabbar-item text="我的" name="Mine" @click="goPage('usermy')">
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          style="width: 50rpx; height: 50rpx"
          src="../../static/usericon/8.png"
        ></image>
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          style="width: 50rpx; height: 50rpx"
          src="../../static/usericon/1.png"
        >
        </image>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>
export default {
  props: {
    name: String,
  },
  name: "usertabbar",
  data() {
    return {};
  },
  methods: {
    goPage(name) {
      uni.reLaunch({
        url: `/pages/userpages/${name}/${name}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>

3、引入相应的页面使用组件

此次写入的name对应相应组件的name ，需要点击效果就写入跟组件相对应的name值。