uniapp微信小程序封装navbar组件

news2025/4/2 17:48:09

一、 最终效果

在这里插入图片描述

二、实现了功能

1、nav左侧返回icon支持自定义点击返回事件(默认返回上一步)
2、nav左侧支持既显示返回又显示返回首页icon
3、nav左侧只显示返回icon
4、nav左侧只显示返回首页icon
5、nav左侧自定义left插槽
6、nav中间支持title命名
7、nav中间支持center插槽
8、支持自定义背景颜色:backgroundColor
9、支持修改icon大小、颜色
10、支持导航栏文字颜色自定义
11、支持自定义返回指定页面并可以传参(goBackUrl、urlParam)
12、支持自定义导航栏高度(默认设备高度)

三、navbar参数配置

1、代码示例:

<navbar titleText="登录页面"/>

2、 配置参数(Attributes)

参数说明类型默认值
backgroundColor导航栏背景颜色String#355db4
navCustomHeight自定义导航栏高度(单位rpx)number0
color导航栏文字颜色String#fff
fontSize导航栏文字大小(单位rpx)number32
iconSize导航栏图标大小number18
iconColor导航栏图标颜色String#fff
titleText导航栏标题String-
backMain是否显示返回首页图标booleanfalse
isGoBack是否显示返回图标booleanfalse
isGoBackEvent是否自定义写返回事件booleanfalse
goBackUrl返回指定页面路径string-
urlParam返回指定页面路径参数string-

3、 Events

事件名说明返回值
goBack自定义返回事件-

4、Slot

事件名说明
left左侧具名插槽
center导航栏标题插槽)
-默认插槽

四、源码

<template>
  <view class="nav" :style="navStyle">
    <view :style="statusBarStyle"></view>
    <view class="navBar" :style="navBarStyle">
      <view class="nav_bar_left" :style="{ color }">
        <!-- 既显示返回又显示返回首页icon -->
        <view v-if="isGoBack && backMain" class="back-home">
          <view class="back flex-box flex-ver" @tap="goBack">
            <uni-icons class="imageClass" :size="iconSize" type="left" :color="iconColor"></uni-icons>
          </view>
          <view class="line"></view>
          <view class="home flex-box flex-ver" @tap="goHome">
            <uni-icons class="imageClass" :size="iconSize" type="home" :color="iconColor"></uni-icons>
          </view>
        </view>
        <!-- 只显示返回icon -->
        <view v-else-if="isGoBack || pages > 1" class="flex-box flex-ver-v" @click.stop="goBack">
          <uni-icons class="imageClass" :size="iconSize" type="left" :color="iconColor"></uni-icons>
        </view>
        <!-- 只显示返回首页icon -->
        <view v-else-if="backMain" class="flex-box flex-ver-v" @click.stop="goHome">
          <uni-icons class="imageClass" :size="iconSize" type="home" :color="iconColor"></uni-icons>
        </view>
        <!-- 自定义插槽 -->
        <view v-else class="flex-box flex-ver-v">
          <slot name="left" />
        </view>
      </view>
      <view class="nav-title" v-if="titleText">
        <view :style="textStyle">{{ titleText }}</view>
      </view>
      <view class="center" v-else>
        <slot name="center" />
      </view>
    </view>
    <slot />
  </view>
</template>

<script setup lang="ts">
interface Search {
  backgroundColor?: string; // 导航栏背景颜色--可以是渐变
  navCustomHeight?: number; // 自定义导航栏高度
  color?: string; // 导航栏文字颜色
  fontSize?: number; // 导航栏文字大小
  iconSize?: number; // 导航栏图标大小
  iconColor?: string; // 导航栏图标颜色
  titleText?: string; // 导航栏标题
  backMain?: boolean; // 是否显示返回首页图标
  isGoBack?: boolean; // 是否显示返回图标
  isGoBackEvent?: boolean; // 是否自定义写返回事件
  goBackUrl?: string; // 返回的url
  urlParam?: string; // 返回的url参数
}
const props = withDefaults(defineProps<Search>(), {
  backgroundColor: "#355db4",
  color: "#fff",
  fontSize: 32,
  iconSize: 18,
  iconColor: "#fff",
  navCustomHeight: 0,
  titleText: "",
  backMain: false,
  isGoBack: false,
  isGoBackEvent: false,
  goBackUrl: "",
  urlParam: ""
});
onLoad(() => {
  setNavSize();
  setStyle();
});
onPageScroll((e: any) => {
  // e.scrollTop 表示当前页面滚动的距离
  console.log(e);
  // 在这里编写你的滚动相关逻辑
});
//状态栏高度
const status = ref(0);
//nav高度
const navHeight = ref(0);
//导航栏高度
const allnavHeight = ref("");
//字体样式
const textStyle = ref("");
// 页面栈的数量
const pages = ref(getCurrentPages().length);
//获取状态栏高度
const setNavSize = () => {
  const app = uni.getSystemInfoSync();
  const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  let statusBarHeight = app.statusBarHeight || 0;
  status.value = statusBarHeight / (uni.upx2px(100) / 100);
  navHeight.value = menuButtonInfo.height / (uni.upx2px(100) / 100) + 30;
  allnavHeight.value = status.value + navHeight.value + "rpx;";
};
const emits = defineEmits(["goBack"]);
const navStyle = computed(() => ({
  height: props.navCustomHeight ? `${props.navCustomHeight}rpx` : allnavHeight.value,
  background: props.backgroundColor
}));
const statusBarStyle = computed(() => `height:${status.value}rpx;`);
const navBarStyle = computed(() => `height:${navHeight.value}rpx;max-height:${navHeight.value}rpx;`);
//样式设置
const setStyle = () => {
  textStyle.value = ["color:" + props.color, "font-size:" + props.fontSize + "rpx"].join(";");
};
// 返回上一步
const goBack = () => {
  console.log("goBackUrl", pages.value);
  if (props.goBackUrl != "") {
    uni.redirectTo({
      url: `${props.goBackUrl}?${props.urlParam}`
    });
  } else {
    if (!props.isGoBackEvent && pages.value > 1) {
      uni.navigateBack();
    } else {
      emits("goBack");
    }
  }
};
// 返回首页
const goHome = () => {
  uni.reLaunch({
    url: "/pages/tabbarPage/tabbarPage"
  });
};
</script>

<style lang="scss">
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  .navBar {
    position: relative;
    display: flex;
    align-items: center;
    .nav_bar_left {
      height: inherit;
      position: absolute;
      width: 75px;
      display: flex;
      align-items: center;
      margin-left: 10px;
      .back-home {
        display: flex;
        align-items: center;
        width: 100%;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 16px;
        box-sizing: border-box;
        box-shadow: 0 0 1px rgb(207, 207, 207);
        overflow: hidden;
        .back {
          flex: 1;
        }
        .home {
          flex: 1;
        }
        .line {
          width: 1px;
          height: 20px;
          background: rgba(0, 0, 0, 0.2);
          transform: scaleX(0.5);
        }
      }
      .back-icon {
        display: flex;
        align-items: center;
        width: 32rpx;
        height: 100%;
        margin-left: 20rpx;
        .imageClass {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .nav-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .flex-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  .flex-ver {
    align-items: center;
    justify-content: center;
  }
  .flex-ver-v {
    align-items: center;
  }
}
</style>


相关文章

基于ElementUi再次封装基础组件文档


Vue3+Vite+Ts+Pinia+Qiankun后台管理系统


vue3+ts基于Element-plus再次封装基础组件文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2325956.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

系统思考与心智模式

我们的生命为什么越来越长&#xff1f;因为有了疫苗&#xff0c;有了药物。可这些是怎么来的&#xff1f;是因为我们发现了细菌的存在。但在很久以前&#xff0c;医生、助产士甚至都不洗手——不是他们不负责&#xff0c;而是根本不知道“细菌”这回事。那细菌是怎么被发现的&a…

数据库--数据库设计

目录&#xff1a; 1.数据库设计和数据模型 2.概念结构设计&#xff1a;E-R模型 3.逻辑结构设计&#xff1a;从E-R图到关系设计 4.数据库规范化设计理论 5.数据库规范化设计实现 1.数据库设计和数据模型 数据库设计会影响数据库自身和上层应用的性能。 一个好的数据库设计可以提…

[Mac]利用hexo-theme-fluid美化个人博客

接上文,使用Fluid美化个人博客 文章目录 一、安装hexo-theme-fluid安装依赖指定主题创建「关于页」效果展示 二、修改个性化配置1. 修改网站设置2.修改文章路径显示3.体验分类和标签4.左上角博客名称修改5.修改背景图片6.修改关于界面 欢迎大家参观 一、安装hexo-theme-fluid 参…

黑盒测试的场景法(能对项目业务进行设计测试点)

定义: 通过运用场景来对系统的功能点或业务流程的描述&#xff0c;设计用例遍历场景&#xff0c;验证软件系统功能的正确性从而提高测试效果的一种方法。 场景法一般包含基本流和备用流。 基本流:软件功能的正确流程&#xff0c;通常一个业务只存在一个基本流且基本流有一个…

通过Anaconda Prompt激活某个虚拟环境并安装第三方库

打开 Anaconda Prompt 在Windows中&#xff0c;可以通过开始菜单搜索 Anaconda Prompt 来打开。&#xff08;红色箭头指向的地方。&#xff09; 激活虚拟环境 输入以下命令来激活您的虚拟环境&#xff08;假设虚拟环境名称为 myenv&#xff09;&#xff1a; conda activate…

全长约8.3公里!宁波象山港跨海大桥南中塔柱云端合龙

快科技3月31日消息&#xff0c;据报道&#xff0c;由中国交建二航局承建的宁波象山港跨海大桥顺利完成南中塔柱合龙施工&#xff0c;标志着这一重大交通工程取得阶段性突破。 这座连接宁波鄞州区与象山县的跨海通道全长8.3公里&#xff0c;其标志性的南主塔采用创新"钻石…

使用 2 端口探头测量 40 uOhm(2000 安培)PDN 的挑战 – 需要多少 CMRR?

部分 1 / 3 本文是 3 部分系列的第一部分&#xff1a; 第 2 部分 - 测量结果&#xff01; 第 3 部分 - 使用另一台 VNA 的测量结果 介绍 我们大多数人都知道 2 端口测量中的接地回路。我们大多数人也都知道&#xff0c;我们需要引入接地回路隔离器来纠正错误。如果没有&…

蓝桥杯——统计子矩阵

解法&#xff1a;二维前缀和双指针 代码&#xff1a; #include <iostream> using namespace std; typedef long long ll; ll prefix[505][505], a[250010]; int main() {ll n, m, k, ans 0; cin >> n >> m >> k;for(int i 1; i < n; i)for(int …

吾爱破解安卓逆向学习笔记(4p)

学习目标&#xff0c;了解安卓四大组件&#xff0c;activity生命周期&#xff0c;同时了解去除部分广告和更新提示。 广告类型 1.启动页广告 2.更新广告 3.横幅广告 安卓四大组件 组件描述Activity(活动)在应用中的一个Activity可以用来表示一个界面&#xff0c;意思可以…

stm32第十天外部中断和NVIC讲解

一&#xff1a;外部中断基础知识 1.STM32外部中断框架 中断的概念&#xff1a;在主程序运行过程中&#xff0c;出现了特点的中断触发条件&#xff0c;使得CPU暂停当前正在运行的程序&#xff0c;转而去处理中断程序&#xff0c;处理完成后又返回原来被暂停的位置继续运行 1&…

26考研——线性表_ 线性表的链式表示_单链表(2)

408答疑 文章目录 三、 线性表的链式表示单链表概念单链表的结构头结点 单链表上基本操作的实现单链表的初始化带头结点和不带头结点的初始化操作注意 求表长操作按序号查找结点按值查找表结点插入结点操作扩展&#xff1a;对某一结点进行前插操作 删除结点操作扩展&#xff1a…

MATLAB 控制系统设计与仿真 - 31

二次型最优控制 考虑到系统如果以状态空间方程的形式给出&#xff0c;其性能指标为&#xff1a; 其中F,Q,R是有设计者事先选定。线性二次最优控制问题简称LQ(Linear Quadractic)问题,就是寻找一个控制,使得系统沿着由指定初态出发的相应轨迹,其性能指标J取得最小值。 LQ问题分…

蓝桥杯15届JAVA_A组

将所有1x1转化为2x2 即1x1的方块➗4 然后计算平方数 记得-1 2 import java.io.BufferedReader; import java.io.InputStreamReader; import java.io.OutputStreamWriter; import java.io.PrintWriter;public class Main{static BufferedReader in new BufferedReader(new In…

deepseek v3 0324实现工作流编辑器

HTML 工作流编辑器 以下是一个简单的工作流编辑器的HTML实现&#xff0c;包含基本的拖拽节点、连接线和可视化编辑功能&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewp…

20250331-智谱-沉思

背景 收到GLM沉思的消息&#xff0c;立马试用下。感觉真的太及时了。 &#xff08;背景&#xff1a;为了客户的需求“AI辅助写作”实验了2款开源workflow&#xff0c;2款在线workflow&#xff0c;好几款多智能体框架后&#xff0c;心中无底之际。。。&#xff09; 1. GLM(开启…

Java EE(17)——网络原理——IP数据报结构IP协议解析(简述)

一.IP数据报结构 (1)版本&#xff1a;指明协议的版本&#xff0c;IPv4就是4&#xff0c;IPv6就是6 (2)首部长度&#xff1a;单位是4字节&#xff0c;表示IP报头的长度范围是20~60字节 (3)8位区分服务&#xff1a;实际上只有4位TOS有效&#xff0c;分别是最小延时&#xff0c;最…

26考研|高等代数:线性空间

线性空间这一章在整个高等代数学习过程中是非常精华的部分&#xff0c;在学习这一章的过程中会有部分的概念较为抽象&#xff0c;一定要抓紧抓牢对于概念的理解&#xff0c;反复阅读与感受&#xff0c;同时也可以根据已知的解析几何中介绍的二维空间或者三维空间进行类推比较&a…

【Linux】进程间通信(IPC)-- 无名管道、命名管道

IPC机制 实现进程间通信 在多个进程间传输数据或共享信息的机制。 数据交换&#xff0c;共享资源&#xff0c;进程同步&#xff0c;消息传递。 IPC实现原理&#xff1a;通信进程能够访问相同的内存区域。 方法&#xff1a; 管道&#xff1a;无名管道pipe、命名管道FIFO S…

每日一题-力扣-2278. 字母在字符串中的百分比 0331

字母在字符串中的百分比求解方案 | 力扣 2278 题解 问题描述 给定一个字符串 s 和一个字母 letter&#xff0c;我们需要计算 letter 在 s 中出现的百分比&#xff0c;并将结果向下取整。例如&#xff0c;如果字符串是 "foobar"&#xff0c;字母是 "o"&…

关于CodeJava的学习笔记——11

一、GUI 1、最简单的GUI 只有一个按钮的GUI import java.awt.*; import javax.swing.*; public class SimpleGUI{JFrame frame;Button bt;public SimpleGUI(){frame new JFrame("标题栏内容");bt new Button("点我啊");frame.add(bt);frame.setSize(8…