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

最新推荐文章于 2024-05-21 16:51:06 发布

一见钟琴009

最新推荐文章于 2024-05-21 16:51:06 发布

阅读量229

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_70811193/article/details/136535099

版权

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值。