小程序中实现自定义头部导航组件

news2024/11/24 1:06:11

在页面中实现自定义头部导航的组件,如果仅是单个页面中需要自定义可在页面的json文件中配置"navigationStyle": “custom”,如果是项目中所有页面都想使用自定义的组件,可在app.json的window中全局配置"navigationStyle": “custom”。
先分析头部导航的组成,可参考图1
图1
其组成主要包含两部分:状态栏、导航区域,下面分别说说这两部分的高度如何获取。
1、获取状态栏高度
对于不同的机型而言,状态栏的高度是有所差异的,可通过wx.getSystemInfo来获取,但需要注意的是该接口在基础库2.20.1后就停止维护,需要改用wx.getWindowInfo获取。
(1)使用wx.getSystemInfo获取示例代码

wx.getSystemInfo({
    success: (res) => {
        this.setData({
            statusBarHeight: res.statusBarHeight 
        })
    }
})

在这里插入图片描述
(2)使用wx.getWindowInfo示例代码

 constres = wx.getWindowInfo()
 this.setData({
   statusBarHeight: res.statusBarHeight 
 })

2、导航区域高度
(1)导航区域的高度可自己定义,但考虑到右侧胶囊,为使得标题位置垂直居中,因而导航区域的高度实际也需要计算得出。其公式为:导航区域的高度 = 胶囊的高度 + 胶囊距离状态栏的高度 * 2。

// 获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。
const rect = wx.getMenuButtonBoundingClientRect()
console.log('右上角胶囊按钮)布局', rect);

在这里插入图片描述

// 获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。
const rect = wx.getMenuButtonBoundingClientRect()
console.log('右上角胶囊按钮)布局', rect);
wx.getSystemInfo({
  success: (res) => {
    this.setData({
      navBarHeight: rect.bottom - rect.top + (rect.top - res.statusBarHeight) * 2, 
	// navBarHeight: rect.height + (rect.top - res.statusBarHeight) * 2, 
    })
  }
})

(2)考虑到胶囊位置,因而导航栏区域可自定义的宽度需减去胶囊的宽度,使用padding-right的方式占用胶囊的宽,注意需要设置为box-sizing: border-box,懂得都懂。
在这里插入图片描述

// 获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。
 const rect = wx.getMenuButtonBoundingClientRect()
 console.log('右上角胶囊按钮)布局', rect);
 wx.getSystemInfo({
   success: (res) => {
     this.setData({
       innerPaddingRight: `padding-right:${res.windowWidth - rect.left}px`,
     })
   }
 })

(3)剩余的宽度你就可以自由发挥了。
以下是组件参考代码
index.xml

<view class="weui-navigation-bar {{extClass}}">
  <view class="status-bar" style="height: {{statusBarHeight}}px; color: {{color}}; background: {{background}}"></view>
  <view class="weui-navigation-bar__inner" style="height: {{navBarHeight}}px; color: {{color}}; background: {{background}}; {{displayStyle}}; {{innerPaddingRight}}">
    <view class='weui-navigation-bar__left' style="{{leftWidth}}">
      <block wx:if="{{back}}">
        <view class="navigation-bar__buttons" bindtap="back">
          <view class="navigation-bar__button navigation-bar__btn_goback" hover-class="active"></view>
        </view>
      </block>
      <block wx:else>
        <slot name="left"></slot>
      </block>
    </view>

    <view class='weui-navigation-bar__center'>
      <view wx:if="{{loading}}" class="weui-navigation-bar__loading" aria-role="alert">
        <view class="weui-loading" style="width:{{size.width}}rpx;height:{{size.height}}rpx;" aria-role="img" aria-label="加载中"></view>
      </view>
      <block wx:if="{{title}}">
        <text>{{title}}</text>
      </block>
      <block wx:else>
        <slot name="center"></slot>
      </block>
    </view>
    <view class='weui-navigation-bar__right'>
      <slot name="right"></slot>
    </view>
  </view>
</view>

index.wxss

.weui-navigation-bar {
  overflow: hidden;
  color: rgba(0, 0, 0, .9);
  width: 100vw;
}
.status-bar{
  width: 100%;
}
.weui-navigation-bar__placeholder {
  background: #f7f7f7;
  position: relative;
}
.weui-navigation-bar__inner, .weui-navigation-bar__inner .weui-navigation-bar__left {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.weui-navigation-bar__inner {
  position: relative;
  padding-right: 95px;
  width: 100vw;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top);
}
.weui-navigation-bar__inner .weui-navigation-bar__left {
  position: relative;
  width: 95px;
  padding-left: 16px;
  box-sizing: border-box;
}
.weui-navigation-bar__btn_goback_wrapper {
  padding: 11px 18px 11px 16px;
  margin: -11px -18px -11px -16px;
}
.weui-navigation-bar__inner .weui-navigation-bar__left .navigation-bar__btn_goback {
  font-size: 12px;
  width: 12px;
  height: 24px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
  background-size: cover;
}
.weui-navigation-bar__inner .weui-navigation-bar__center {
  font-size: 17px;
  text-align: center;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
@media(prefers-color-scheme: dark) {
  .weui-navigation-bar {
    color: hsla(0, 0%, 100%, .8);
  }
  .weui-navigation-bar__inner {
    background-color: #1f1f1f;
  }
}
  

index.js

Component({
    options: {
      multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },
    /**
     * 组件的属性列表
     */
    properties: {
      extClass: {
        type: String,
        value: ''
      },
      title: {
        type: String,
        value: ''
      },
      background: {
        type: String,
        value: '#fff'
      },
      color: {
        type: String,
        value: '#000'
      },
      back: {
        type: Boolean,
        value: true
      },
      loading: {
        type: Boolean,
        value: false
      },
      animated: {
        // 显示隐藏的时候opacity动画效果
        type: Boolean,
        value: true
      },
      show: {
        // 显示隐藏导航,隐藏的时候navigation-bar的高度占位还在
        type: Boolean,
        value: true,
        observer: '_showChange'
      },
      // back为true的时候,返回的页面深度
      delta: {
        type: Number,
        value: 1
      }
    },
    /**
     * 组件的初始数据
     */
    data: {
      displayStyle: '',
      statusBarHeight: 20
    },
    attached() {
      // 获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。
      const rect = wx.getMenuButtonBoundingClientRect()
      // console.log('右上角胶囊按钮)布局', rect);
      wx.getSystemInfo({
        success: (res) => {
          this.setData({
            innerPaddingRight: `padding-right:${res.windowWidth - rect.left}px`,
            leftWidth: `width:${res.windowWidth - rect.left}px`,
            // navBarHeight: rect.bottom + rect.top  - res.statusBarHeight,  //84px
            navBarHeight: rect.bottom - rect.top + (rect.top - res.statusBarHeight) * 2, //40px
            statusBarHeight: res.statusBarHeight //44px
          })
        }
      })
    },
    /**
     * 组件的方法列表
     */
    methods: {
      _showChange(show) {
        const animated = this.data.animated
        let displayStyle = ''
        if (animated) {
          displayStyle = `opacity: ${show ? '1' : '0'};transition: opacity 0.5s;`
        } else {
          displayStyle = `display: ${show ? '' : 'none'}`
        }
        this.setData({
          displayStyle
        })
      },
      back() {
        const data = this.data
        if (data.delta) {
          wx.navigateBack({
            delta: data.delta
          })
        }
        this.triggerEvent('back', { delta: data.delta }, {})
      }
    }
  })
  

index.json

{
  "component": true,
  "usingComponents": {}
}

在页面中使用该组件
page.json

{
  "usingComponents": {
    "zxm-navigation-bar": "/components/zxm-navigation-bar" //该成你所放组件的路径哟
  },
  "navigationStyle": "custom",
  "disableScroll": true
}

page.wxml

<view>
  <zxm-navigation-bar title="标题"></zxm-navigation-bar>
</view>

代码也可前往这里下载

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

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

相关文章

2024-6-9

今日安排&#xff1a; 学校的课程作业windows SEH 机制简单入门windows 用户态 pwn / 内核态入门 计网实验报告 && 网安实验报告继续审计 nf_tables 源码&#xff0c;主要看 active 相关逻辑。复现 CVE-2022-32250 这个漏洞【 && iptables 相关学习】♥♥♥♥…

【车载开发系列】MCU选型

【车载开发系列】MCU选型 【车载开发系列】MCU选型 【车载开发系列】MCU选型一. 重要概念二. MCU选型的风险风险1风险2 三. MCU选型要点四. MCU选型维度五. MCU 选型需要考虑的因素1&#xff09;ROM/RAM2&#xff09;速度/主频3&#xff09;分析外设需求4&#xff09;工作电压(…

idea编码问题:需要 <标识符> 非法的类型 、需要为 class、interface 或 enum 问题解决

目录 问题现象 问题解决 问题现象 今天在idea 使用中遇到的一个编码的问题就是&#xff0c;出现了这个&#xff1a; Error:(357, 28) java: /home/luya...........anageService.java:357: 需要 <标识符> Error:(357, 41) java: /home/luya............anageService.ja…

表达式求值的相关语法知识(C语言)

目录 整型提升 整型提升的意义 整型提升规则 整型提升实例 算术转换 赋值转换 操作符的属性 C语言的语法并不能保证表达式的执行路径唯一&#xff01;&#xff01;&#xff01; 问题表达式 整型提升 C的整型算术运算总是至少以缺省整型类型的精度来进行的。为了获得这…

基于SSM+Jsp的家用电器销售网站

开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包…

锂电池寿命预测 | Matlab基于SSA-SVR麻雀优化支持向量回归的锂离子电池剩余寿命预测

目录 预测效果基本介绍程序设计参考资料 预测效果 基本介绍 【锂电池剩余寿命RUL预测案例】 锂电池寿命预测 | Matlab基于SSA-SVR麻雀优化支持向量回归的锂离子电池剩余寿命预测&#xff08;完整源码和数据&#xff09; 1、提取NASA数据集的电池容量&#xff0c;以历史容量作…

LLVM Cpu0 新后端10

想好好熟悉一下llvm开发一个新后端都要干什么&#xff0c;于是参考了老师的系列文章&#xff1a; LLVM 后端实践笔记 代码在这里&#xff08;还没来得及准备&#xff0c;先用网盘暂存一下&#xff09;&#xff1a; 链接: https://pan.baidu.com/s/1yLAtXs9XwtyEzYSlDCSlqw?…

GitLab代码导出 gitlab4j-api 实现

目录 GitLab简介 GitLab 的主要特点包括&#xff1a; GitLab代码导出 gitlab4j-api 添加 gitlab4j-api 依赖 使用 gitlab4j-api 获取特定命名空间下的所有项目 说明 注意事项 GitLab简介 GitLab 是一个开源的代码仓库和协作平台&#xff0c;主要用于版本控制和源代码管理…

无人用过!QRTCN-BiLSTM实现区间预测!区间预测全家桶再更新!

声明&#xff1a;文章是从本人公众号中复制而来&#xff0c;因此&#xff0c;想最新最快了解各类智能优化算法及其改进的朋友&#xff0c;可关注我的公众号&#xff1a;强盛机器学习&#xff0c;不定期会有很多免费代码分享~ 今天对我们之前推出的区间预测全家桶再次进行更新&…

SPSS 27 安装教程(附安装包下载)

SPSS 27 是一款用于统计学分析运算、数据挖掘、预测分析和决策支持任务的软件产品。它最初是为社会科学领域的研究者设计的&#xff0c;但随着其功能和应用的不断扩展&#xff0c;现在已广泛应用于各个领域&#xff0c;如医学、市场调研、教育等。 [安装注意]&#xff1a;安装前…

智能制造 v3.13.11 发布,ERP、在线课堂、表白墙更新

智能制造一体化管理系统 [SpringBoot2 - 快速开发平台]&#xff0c;适用于制造业、建筑业、汽车行业、互联网、教育、政府机关等机构的管理。包含文件在线操作、工作日志、多班次考勤、CRM、ERP 进销存、项目管理、EHR、拖拽式生成问卷、日程、笔记、工作计划、行政办公、薪资模…

UE5基础1-下载安装

目录 一.下载 二.安装 三.安装引擎 四.其他 简介: UE5&#xff08;Unreal Engine 5&#xff09;是一款功能极其强大的游戏引擎。 它具有以下显著特点&#xff1a; 先进的图形技术&#xff1a;能够呈现出令人惊叹的逼真视觉效果&#xff0c;包括高逼真的光影、材…

Robust Tiny Object Detection in Aerial Images amidst Label Noise

文章目录 AbstractIntroductionRelated WorkMethodsClass-aware Label CorrectionUpdateFilteringTrend-guided Learning StrategyTrend-guided Label ReweightingRecurrent Box RegenerationExperimentpaper Abstract 精确检测遥感图像中的小目标非常困难,因为这类目标视觉信…

【C++题解】1389 - 数据分析

问题&#xff1a;1389 - 数据分析 类型&#xff1a;简单循环 题目描述&#xff1a; 该方法的操作方式为&#xff0c;如果要传递 2 个数字信息给友军&#xff0c;会直接传递给友军一个整数 n&#xff08;n 是一个 10 位以内的整数&#xff09;&#xff0c;该整数的长度代表要传…

Ps:自动批量处理照片

有很多种方法可以将调色风格一次性应用到多张照片上。 但对于要进行局部修饰的照片&#xff0c;比如人像照片中要去除皮肤上的瑕疵、柔化皮肤上的光影以及均匀肤色等&#xff0c;想要实现成批处理似乎很困难。 随着人工智能技术的不断发展&#xff0c;越来越多的插件具备自动修…

Linux下文件权限管理

任务要求 1. 在跳板机上为开发部门专门创建一个目录&#xff0c;只允许开发部门所有员工使用该目录 2. 其他人员不能进入和查看该目录里的内容 任务分解 1. 在跳板机给开发部门创建目录 2. 对该目录做好权限的管控工作 只允许开发部门的所有人使用&#xff0c;创建、删除…

Day20:LeedCode 654.最大二叉树 617.合并二叉树 700.二叉搜索树中的搜索 98.验证二叉搜索树

654. 最大二叉树 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点&#xff0c;其值为 nums 中的最大值。递归地在最大值 左边 的 子数组前缀上 构建左子树。递归地在最大值 右边 的 子数组后缀上 构建右子树。 返回 nums 构…

机器学习--回归模型和分类模型常用损失函数总结(详细)

文章目录 引言 回归模型常用损失函数均方误差&#xff08;Mean Squared Error, MSE&#xff09;均方根误差&#xff08;Root Mean Squared Error, RMSE&#xff09;平均绝对误差&#xff08;Mean Absolute Error, MAE&#xff09;Huber损失&#xff08;Huber Loss&#xff09; …

外部排序快速入门详解:基本原理,败者树,置换-选择排序,最佳归并树

文章目录 外部排序1.最基本的外部排序原理2.外部排序的优化2.1 败者树优化方法2.2 置换-选择排序优化方法2.3 最佳归并树 外部排序 为什么要学习外部排序&#xff1f; 答&#xff1a; 在处理数据的过程中&#xff0c;我们需要把磁盘(外存&#xff09;中存储的数据拿到内存中处理…

导数和微分

导数和微分 flyfish 本文主要论述其中的区别 导数是描述函数变化率的量&#xff0c;它表示函数在某点的瞬时变化速度和切线斜率。 微分是导数的一个线性近似&#xff0c;表示函数在某点处随着自变量变化的增量。 导数和微分在本质上都是研究函数变化的工具&#xff0c;但导数…