uniapp项目实践总结(五)自定义底部导航栏

最新推荐文章于 2024-06-08 17:00:18 发布

JackieChan_

最新推荐文章于 2024-06-08 17:00:18 发布

阅读量227

点赞数 2

分类专栏： uniapp 文章标签： uni-app

本文链接：https://blog.csdn.net/longxiaobao123/article/details/138566135

版权

uniapp 专栏收录该内容

50 篇文章 1 订阅

订阅专栏

在这里插入图片描述

{
  "pages": [
    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/message/index",
      "style": {
        "navigationBarTitleText": "消息"
      }
    },
    {
      "path": "pages/discover/index",
      "style": {
        "navigationBarTitleText": "发现"
      }
    },
    {
      "path": "pages/user/index",
      "style": {
        "navigationBarTitleText": "我的"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "HelloApp",
    "navigationBarBackgroundColor": "#333",
    "backgroundColor": "#f8f8f8"
  },
  "tabBar": {
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "color": "#555",
    "selectedColor": "#24afd6",
    "list": [
      {
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "static/image/icon/home.png",
        "selectedIconPath": "static/image/icon/home-act.png"
      },
      {
        "text": "消息",
        "pagePath": "pages/message/index",
        "iconPath": "static/image/icon/message.png",
        "selectedIconPath": "static/image/icon/message-act.png"
      },
      {
        "text": "发现",
        "pagePath": "pages/discover/index",
        "iconPath": "static/image/icon/discover.png",
        "selectedIconPath": "static/image/icon/discover-act.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/user/index",
        "iconPath": "static/image/icon/user.png",
        "selectedIconPath": "static/image/icon/user-act.png"
      }
    ]
  }
}

在这里插入图片描述

import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const qTabbar = reactive({
  list: [
    {
      id: 1,
      name: "首页",
      icon: "home",
      url: "/pages/index/index",
    },
    {
      id: 2,
      name: "消息",
      icon: "message",
      url: "/pages/message/index",
    },
    {
      id: 3,
      name: "发现",
      icon: "discover",
      url: "/pages/discover/index",
    },
    {
      id: 4,
      name: "我的",
      icon: "user",
      url: "/pages/user/index",
    },
  ],
});

const props = defineProps({
  // 当前导航
  current: {
    type: Number,
    default: 1,
  },
  // 文字颜色
  color: {
    type: String,
    default: "#999",
  },
  // 活动颜色
  activeColor: {
    type: String,
    default: "#fff",
  },
  // 背景色
  bgColor: {
    type: String,
    default: "#333",
  },
  // 边框色
  borColor: {
    type: String,
    default: "#e3e3e3",
  },
  // 显示文字
  showText: {
    type: Boolean,
    default: true,
  },
  // 显示图标
  showIcon: {
    type: Boolean,
    default: true,
  },
});

// 发送消息
const emits = defineEmits(["change"]);

// 方法

// 加载
onLoad(() => {
  uni.hideTabBar();
});

// 切换导航
function toggleNav(item) {
  uni.switchTab({
    url: item.url,
    success() {
      emits("change", item);
    },
  });
}