当前位置: 首页 > news >正文

微信小程序第一节 —— 自定义顶部、底部导航栏以及获取胶囊体位置信息。

一、前言

大家好!我是 是江迪呀。我们在进行微信小程序开发时,常常需要自定义一些东西,比如自定义顶部导航自定义底部导航等等。那么知道这些自定义内容的具体位置、以及如何适配不同的机型就变得尤为重要。下面让我以在iPhone机型,来给大家介绍下微信小程序如何获取自定义内容的位置信息。

二、开启自定义

如果需要自定义顶部和底部导航。那么如何在自定义后能够适配不同的机型而不会出现样式问题呢?我们可以通过wx.getSystemInfo({})方法来获取页面的信息来保证样式的正确性。此方法常用于app.js文件中的onLanch()方法中,保证这些信息优先被加载,并把获取到的页面信息放到全局变量中,方便其他页面的获取使用。

在此之前需要开启自定义顶部和底部导航栏。如下所示:

{"pages": ["pages/index/index","pages/index2/index2" ],//自定义顶部导航 "navigationStyle": "custom","window": {"navigationStyle": "custom","navigationBarTextStyle": "white","backgroundTextStyle": "light"},//自定义底部导航 "navigationStyle": "custom",这里注意在设置自定义底部导航栏时,list中至少包含两个页面"tabBar": {"custom": true,"list": [{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/index2/index2","text": "首页2"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

2.1 整个页面

1.位置

在这里插入图片描述

2.如何获取

页面代码:

<view style="height: {{screenHeight}}px;background-color: aliceblue;">
</view>

页面js代码:

const app = getApp()
Page({data: {screenHeight: app.globalData.screenHeight,}
})

app.js文件代码:

onLaunch: function() {wx.getSystemInfo({success: e => {//获取整个页面的高度this.globalData.screenHeight = e.screenHeight;}},)}

2.1 状态栏

1.位置

状态栏就是手机最顶部显示时间信号电量等信息的区域。一般状态栏的信息我们不单独获取设置,因为顶部导航栏包含了状态栏
在这里插入图片描述

2.如何获取

页面代码:

<!--index.wxml-->
<view style="height: {{screenHeight}}px;background-color: aliceblue;"><!--状态栏高度--><view style="height: {{statusBarHeight}}px;background-color: red;"></view>
</view>

页面js代码:

// index.js
const app = getApp()
Page({data: {screenHeight: app.globalData.screenHeight,statusBarHeight: app.globalData.statusBarHeight}
})

app.js文件代码:

    onLaunch: function() {wx.getSystemInfo({success: e => {this.globalData.screenHeight = e.screenHeight;//获取状态栏的高度this.globalData.StatusBar = e.statusBarHeight;}},)}

2.2 顶部导航栏

1.位置

顶部导航栏的高度是包含胶囊体的。
在这里插入图片描述

2.如何获取

首先获取胶囊体的信息,如果不存在胶囊体,顶部导航栏高度 = 状态栏高度 + 50;如果存在顶部导航栏高度 = 胶囊体离页面顶部的距离 + 胶囊体离页面底部的距离 - 状态栏高度
页面代码:

<view style="height: {{screenHeight}}px;background-color: aliceblue;"><!--顶部导航高度--><view style="height: {{customBar}}px;background-color: blue;"></view>
</view>

页面js代码:

const app = getApp()
Page({data: {screenHeight: app.globalData.screenHeight,customBar: app.globalData.CustomBar}
})

app.js代码:

// app.js
App({globalData:{},onLaunch: function() {wx.getSystemInfo({success: e => {let capsule = wx.getMenuButtonBoundingClientRect();if (capsule) {this.globalData.Custom = capsule;this.globalData.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;} else {this.globalData.CustomBar = e.statusBarHeight + 50;}}},)}
})

2.4 内容区域

1.位置

如果你做的小程序没有底部导航栏的话,那么内容区域 = 页面总高度 - 顶部导航栏高度
在这里插入图片描述
但是如果你需要底部导航的话那么内容区域 = 页面总高度 - 顶部导航栏高度 - 底部导航栏高度
在这里插入图片描述

2.如何获取

页面代码:

  <view style="height:{{screenHeight}}px;width: 100%;background-color: rgb(255, 255, 255);"><!--顶部导航栏--><view class="" style="height: {{CustomBar}}px;background-color: blue;"></view><!--内容区域--><view class="" style="height: {{screenHeight - CustomBar}}px;background-color: black;"></view><!--内容区域 包含底部导航--><view class="" style="height: {{screenHeight - CustomBar - tabBarHeight}}px;background-color: black;"></view></view>

页面js代码:

const app = getApp()
Page({data: {screenHeight: app.globalData.screenHeight,CustomBar: app.globalData.CustomBar,tabBarHeight: app.globalData.tabBarHeight,}
})

app.js代码:

// app.js
App({globalData:{},onLaunch: function() {// 获取系统状态栏信息wx.getSystemInfo({success: e => {this.globalData.screenHeight = e.screenHeight;this.globalData.tabBarHeight = e.screenHeight - e.safeArea.bottom + 50let capsule = wx.getMenuButtonBoundingClientRect();if (capsule) {this.globalData.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;} else {this.globalData.CustomBar = e.statusBarHeight + 50;}}},)}
})

2.3 底部导航栏

1.位置

在这里插入图片描述

2.如何获取

页面代码:

<view style="height: {{screenHeight}}px;background-color: aliceblue;"><!--顶部导航高度--><view style="height: {{customBar}}px;background-color: blue;"></view><!--内容高度 包含底部导航--><view style="height: {{screenHeight - customBar - tabBar}}px;background-color: black;"></view><!--底部导航高度--><view style="height: {{tabBarHeight}}px;background-color: red;"></view>
</view>

页面js代码:

const app = getApp()
Page({data: {screenHeight: app.globalData.screenHeight,statusBarHeight: app.globalData.statusBarHeight,customBar: app.globalData.CustomBar,tabBar: app.globalData.tabBarHeight,tabBarHeight: app.globalData.tabBarHeight}
})

app.js代码:

    onLaunch: function() {wx.getSystemInfo({success: e => {this.globalData.screenHeight = e.screenHeight;this.globalData.tabBarHeight = e.screenHeight-e.safeArea.bottom + 50let capsule = wx.getMenuButtonBoundingClientRect();if (capsule) {this.globalData.Custom = capsule;this.globalData.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;} else {this.globalData.CustomBar = e.statusBarHeight + 50;}}},)}

这个底部导航栏之所以+50,我是从小程序框架中获取的,可以直接拿来用。

三、胶囊体

3.1 什么是胶囊体?

在这里插入图片描述

我们再做自定义顶部导航时,在一些场景下需要在导航中设置返回按钮以及其他信息:
在这里插入图片描述
这些按钮和信息需要和胶囊体对齐才完美,所以我们需要获取到胶囊体的位置信息。

3.2 如何获取?

// app.js
App({globalData:{},onLaunch: function() {// 获取系统状态栏信息wx.getSystemInfo({success: e => {//胶囊体距离顶部距离this.globalData.capsuleTop =  wx.getMenuButtonBoundingClientRect().top;//胶囊体的高度this.globalData.capsuleHeight =  wx.getMenuButtonBoundingClientRect().height;//胶囊体的宽度this.globalData.capsuleWidth =  wx.getMenuButtonBoundingClientRect().width;}},wx.onKeyboardHeightChange((res) => {console.log('键盘高度111111:', res.height)wx.setStorageSync('keyBordHeight', res.height)}))}
})

相关文章:

微信小程序第一节 —— 自定义顶部、底部导航栏以及获取胶囊体位置信息。

一、前言 大家好&#xff01;我是 是江迪呀。我们在进行微信小程序开发时&#xff0c;常常需要自定义一些东西&#xff0c;比如自定义顶部导航、自定义底部导航等等。那么知道这些自定义内容的具体位置、以及如何适配不同的机型就变得尤为重要。下面让我以在iPhone机型&#x…...

快速吃透π型滤波电路-LC-RC滤波器

π型滤波器简介 π型滤波器包括两个电容器和一个电感器&#xff0c;它的输入和输出都呈低阻抗。π型滤波有RC和LC两种&#xff0c; 在输出电流不大的情况下用RC&#xff0c;R的取值不能太大&#xff0c;一般几个至几十欧姆&#xff0c;其优点是成本低。其缺点是电阻要消耗一些…...

聊聊混沌工程

这是鼎叔的第五十四篇原创文章。行业大牛和刚毕业的小白&#xff0c;都可以进来聊聊。欢迎关注本专栏和微信公众号《敏捷测试转型》&#xff0c;大量原创思考文章陆续推出。混沌工程是一门新兴学科&#xff0c;它不仅仅只是个技术活动&#xff0c;还包含如何设计能够持续协作的…...

做为骨干网络的分类模型的预训代码安装配置简单记录

一、安装配置环境 1、准备工作 代码地址 GitHub - bubbliiiing/classification-pytorch: 这是各个主干网络分类模型的源码&#xff0c;可以用于训练自己的分类模型。 # 创建环境 conda create -n ptorch1_2_0 python3.6 # 然后启动 conda install pytorch1.2.0 torchvision…...

网络协议(九):应用层(域名、DNS、DHCP)

网络协议系列文章 网络协议(一)&#xff1a;基本概念、计算机之间的连接方式 网络协议(二)&#xff1a;MAC地址、IP地址、子网掩码、子网和超网 网络协议(三)&#xff1a;路由器原理及数据包传输过程 网络协议(四)&#xff1a;网络分类、ISP、上网方式、公网私网、NAT 网络…...

有趣的小知识(三)提升网站速度的秘诀:掌握缓存基础,让你的网站秒开

像MySql等传统的关系型数据库已经不能适用于所有的业务场景&#xff0c;比如电商系统的秒杀场景&#xff0c;APP首页的访问流量高峰场景&#xff0c;很容易造成关系型数据库的瘫痪&#xff0c;随着缓存技术的出现很好的解决了这个问题。 一、缓存的概念&#xff08;什么是缓存…...

SpringCloud之服务拆分和实现远程调用案例

服务拆分对单体架构项目来说&#xff1a;简单方便&#xff0c;高度耦合&#xff0c;扩展性差&#xff0c;适合小型项目。而对于分布式架构来说&#xff1a;低耦合&#xff0c;扩展性好&#xff0c;但架构复杂&#xff0c;难度大。微服务就是一种良好的分布式架构方案&#xff1…...

mybatis: Invalid bound statement (not found): com.atguigu.dao.UserDao.save

问题描述&#xff1a; 1 问题实质: dao层(又叫mapper接口)跟mapper.xml文件没有映射 2 问题原因: 出现这种映射问题的原因分为低级原因和更低级原因两种 更低级原因: (1)dao层的方法和mapper.xml中的方法不一样; (2)mapper中的namespace 值 和对应的dao层entity层不一致 &…...

JavaScript 代码规范

所有的 JavaScript 项目适用同一种规范。JavaScript 代码规范代码规范通常包括以下几个方面:变量和函数的命名规则空格&#xff0c;缩进&#xff0c;注释的使用规则。其他常用规范……规范的代码可以更易于阅读与维护。代码规范一般在开发前规定&#xff0c;可以跟你的团队成员…...

6综合项目 旅游网 【6.我的收藏和收藏排行榜】

我的收藏分析先登录→拿到当前登录的用户信息&#xff0c;从数据库中获取uid和对应uid的rid集合→将rid集合信息展示到我的收藏前台代码判断用户是否登录&#xff0c;传递uid&#xff0c;通过uid查找其对应的rid集合当查询的属性涉及到多张表&#xff0c;则必须使用多表连接&am…...

openpnp - error - 微调mark点坐标后,更新板子其他原件其他坐标报错的变通方法

文章目录openpnp - error - 微调mark点坐标后,更新板子其他原件其他坐标报错的变通方法概述想出来一个变通的方法ENDopenpnp - error - 微调mark点坐标后,更新板子其他原件其他坐标报错的变通方法 概述 载入坐标文件后, 指定左下角远点坐标, 然后定位板子上的3个Mark点, 因为…...

借助ChatGPT爆火,股价暴涨又暴跌后,C3.ai仍面临巨大风险

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 C3.ai的股价 作为一家人工智能技术提供商&#xff0c;C3.ai&#xff08;AI&#xff09;的股价曾在2021年初随着炒作情绪的增加&#xff0c;达到了历史最高点&#xff0c;但自那以后其股价就下跌了90%&#xff0c;而且炒作情…...

蓝桥杯-数位排序

蓝桥杯-数位排序1、问题描述2、解题思路3、代码实现1、问题描述 小蓝对一个数的数位之和很感兴趣, 今天他要按照数位之和给数排序。当 两个数各个数位之和不同时, 将数位和较小的排在前面, 当数位之和相等时, 将数值小的排在前面。 例如, 2022 排在 409 前面, 因为 2022 的数位…...

【ES实战】ES 插件包离线安装(本地文件)

ES 插件包离线安装&#xff08;本地文件&#xff09; 文章目录ES 插件包离线安装&#xff08;本地文件&#xff09;使用安装命令安装直接解压式验证安装情况常用的分词插件analysis-ik analysis-pinyin analysis-dynamic-synonym 在集群的节点上分发插件的ZIP安装包 使用安…...

Spring的核心基础——IOC与DI

文章目录一、Spring简介1 Spring介绍1.1 为什么要学1.2 学什么2 初识Spring2.1 Spring家族2.2 Spring发展史3 Spring体系结构3.1 Spring Framework系统架构图4 Spring核心概念问题导入4.1 核心概念二、IOC和DI入门1 IOC入门问题导入1.1 门案例思路分析1.2 实现步骤1.3 实现代码…...

C++正则表达式基础

文章目录1. 查找第一个匹配的2. 查找所有结果3. 打印匹配结果的上下文4. 使用子表达式5. 查找并替换注意: .&#xff08;点&#xff09;在括号中没有特殊含义&#xff0c;无需转义用\转义。 1. 查找第一个匹配的 #include <iostream> #include <regex>using names…...

如何在网络安全中使用人工智能并避免受困于此

人工智能在网络安全中的应用正在迅速增长&#xff0c;并对威胁检测、事件响应、欺诈检测和漏洞管理产生了重大影响。根据Juniper Research的一份报告&#xff0c;预计到2023年&#xff0c;使用人工智能进行欺诈检测和预防将为企业每年节省110亿美元。但是&#xff0c;如何将人工…...

生态 | 人大金仓与超聚变的多个产品完成兼容认证

近日&#xff0c;人大金仓与超聚变数字技术有限公司&#xff08;简称“超聚变”&#xff09;完成了多款产品的兼容互认测试。测试表明&#xff0c;人大金仓KingbaseES V8数据库与超聚变服务器操作系统FusionOS、超聚变FusionOne基础设施完全兼容&#xff0c;人大金仓异构数据同…...

4自由度串联机械臂按颜色分拣物品功能的实现

1. 功能说明 本实验要实现的功能是&#xff1a;将黑、白两种颜色的工件分别放置在传感器上时&#xff0c;机械臂会根据检测到的颜色&#xff0c;将工件搬运至写有相应颜色字样区域。 2. 使用样机 本实验使用的样机为4自由度串联机械臂。 3. 运动功能实现 3.1 电子硬件 在这个…...

玩转结构体---【C语言】

⛩️博主主页&#xff1a;威化小餅干&#x1f4dd;系列专栏&#xff1a;【C语言】藏宝图&#x1f38f; ✨绳锯⽊断&#xff0c;⽔滴⽯穿&#xff01;一个编程爱好者的学习记录!✨目录结构体类型的声明结构体成员访问结构体传参前言我们是否有想过&#xff0c;为什么会有结构体呢…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

WebRTC从入门到实践 - 零基础教程

WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC&#xff1f; WebRTC&#xff08;Web Real-Time Communication&#xff09;是一个支持网页浏览器进行实时语音…...

阿里云Ubuntu 22.04 64位搭建Flask流程(亲测)

cd /home 进入home盘 安装虚拟环境&#xff1a; 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境&#xff1a; virtualenv myenv 3、激活虚拟环境&#xff08;激活环境可以在当前环境下安装包&#xff09; source myenv/bin/activate 此时&#xff0c;终端…...

云安全与网络安全:核心区别与协同作用解析

在数字化转型的浪潮中&#xff0c;云安全与网络安全作为信息安全的两大支柱&#xff0c;常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异&#xff0c;并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全&#xff1a;聚焦于保…...