小程序头部导航根据不同机型适配

于 2024-01-18 09:20:39 发布
阅读量457 收藏 6
点赞数 9
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/siyuhuang_scdn/article/details/135665504
版权

手机的型号不同有刘海屏还有其他类型的屏幕，会造成遮挡我们导航样式文字的效果，如何解决？=》获取安全区高度，动态增加paddingTop样式

1.在当页的script获取屏幕边界到安全区域距离

const {safeAreaInsets} = uni.getSystemInfoSync()

2.在template模板中添加动态样式

:style="{paddingTop:safeAreaInsets.top+'px'}"

可以实现不同手机头部导航适配

铁锤黄儿~
关注
微信小程序自定义导航栏（适配刘海屏）
qq_39106854的博客
04-08 1万+
整理一下微信小程序自定义导航栏和刘海屏适配问题 1.首先在根据官方文档，我们在小程序修改 app.json 中的 window 的属性 "navigationStyle": "custom"。 { "pages":[ "pages/index/index", ], "window":{ "navigationBarBackgroundColor": "#fff...
微信小程序自定义导航栏兼容适配所有机型
青年码农
11-01 681
目前小程序已在前端占了一席之地，最近公司项目上用的就是小程序开发，由于功能及页面不是很多，所以直接原生开发，毕竟坑可能会少点，在开发过程中，小程序自带导航栏和客户的设计稿导航栏排在一起，感觉很别扭，因此要求去掉微信的自带导航栏，微信提供了这方面的api，接下来我们就实操。这是小程序官方文档截图，可以看到导航栏样式支持两种，默认是带导航栏，另外一种是自定义导航栏-custo...
小程序自定义头部及多端适配
weixin_69370222的博客
04-18 1048
小程序自定义头部及实现自定义头部多端适配
vue 屏幕适配
sally18的博客
08-09 1002
前言 项目基础配置使用vue-cli2 生成 自适应方案核心：阿里可伸缩布局方案 lib-flexible px转rem: px2rem,它有webpack的loader px2rem 开始 先使用vue脚手架初始化一个webpack项目 项目初始化好了之后，进入项目中安装 lib-flexible 和 px2rem-loader 安装好了之后还需要在项目的入口文件 main.js里引入 lib-flexible 接下来为了验证lib-flexible是否生效，可以将app...
vant ios 刘海屏情况下的问题
技术前端，忠于热爱 @回忆哆啦没有A梦
12-16 622
vant ios 有刘海屏情况下的问题使用ActionSheet 动作面板出现的问题
刘海屏幕适配（集多个博客总结）
Natty的博客
10-15 7186
                                     android 刘海屏适配   背景 自从iphone x发布后，各大厂商也发布了类似的刘海屏手机（“顶部屏幕凹槽设计”），开发者应该如何适配呢？ 原理 为什么会有刘海屏？ 因为大家有自拍的需求，需要摄像头前置，除了摄像头前置外，刘海屏上还有一些其他的传感器，所以不同厂商的刘海屏长度也不相同。 这里主要是介绍一...
Vue - 基于vant的APP框架(navbar+tabbar+router)
iotjin的专栏
06-17 5940
demo 地址: https://github.com/iotjin/jh-vue-demo的app1项目 本篇主要介绍如何使用vant的navbar、tabbar和vue-router 创建一个vue版的APP基础框架(适配刘海屏) app的主界面一般由三部分构成：navbar + 主体内容 +tabbar，如下图： 所以需要创建navbar组件和tabbar组件，然后通过router-view映射组件，连通单个页面 1、首先要有Vue项目 Vue - Mac安装vue-cli4.x 并创建.
【Taro开发】-全局自定义导航栏适配AtMessage位置及相关问题（十四）
Li-的博客
04-20 2771
Taro小程序开发 系列文章的所有文章的目录 【Taro开发】-初始化项目（一） 【Taro开发】-路由传参及页面事件调用（二） 【Taro开发】-taro-ui（三） 【Taro开发】-带token网络请求封装（四） 【Taro开发】-自定义导航栏NavBar（五） 【Taro开发】-formData图片上传组件（六） 【Taro开发】-封装Form表单组件和表单检验（七） 【Taro开发】-tabs标签页及子组件的下拉刷新（八） 【Taro开发】-简易的checkBoxGroup组件（九） 【Taro
微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）
10-15
本文将详细介绍如何实现微信小程序自定义顶部导航栏，并确保其在所有机型上的适配。首先，我们要了解`navigationBar`的基本概念，它是小程序页面顶部的默认导航栏，包含返回按钮、标题以及胶囊按钮（用于调起用户...
微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例）
03-29
根据不同机型计算出该机型的导航栏高度，进行适配 编写新的导航栏 引用到页面 正文 一、隐藏原生的navigationBar window全局配置里有个参数：navigationStyle（导航栏样式），default=默认样式，custom=自定义样式。...
微信小程序自定义导航栏并适配不同机型
最新发布
无敌的大前端
08-17 289
新鲜 · 亲民 · 快捷</text></view>-- 搜索条 --><text class="icon-search">搜索商品
小程序刘海屏适配考研打卡app小程序开发第三篇（细节处理）
程序员凯小白的博客
04-10 1255
安卓和小程序体验 小程序体验 安卓版本体验安卓体验 1.异形屏适配问题 为了界面更美观，在开发过程中，我们往往会取消微信小程序自带的顶部导航栏，而去掉顶部导航栏之后，我们的页面就从手机最顶部开始展示。而这个时候如果不进行刘海屏的适配。 首先先介绍如何取消原生顶部栏 在页面的json文件中，加入 { "navigationStyle": "custom" } 获取当前手机...
Taro编译微信小程序实现顶部自定义导航栏
qq_41409353的博客
06-09 6640
【需求】 使用taro开发微信小程序的过程中，涉及到小程序的需要自定义顶部导航栏（导航栏渐变色），微信小程序中只能够设置固定的颜色，渐变颜色以及添加其他按钮的操作就不能够通过小程序自带的api来实现 【思路】 配置自定义导航栏设置 获取顶部状态栏高度、胶囊按钮高度、以及胶囊到顶部的高度 计算状态栏的高度，并赋值给dom元素 实现icon跳转及组件化 【代码】 1. 配置自定义导航栏设置 pages — demand — index.config.js export default { navi
Taro小程序自定义顶部导航栏
weixin_44143279的博客
12-14 5751
微信自带的顶部导航栏是无法支持自定义icon和增加元素的，在开发小程序的时候自带的根本满足不了需求，分享一个封装好的组件，支持自定义icon、扩展dom，适配安卓、ios、h5，全面屏。 我用的是京东的Taro多端编译框架写的小程序，原生的也可以适用，用到的微信/taro的api做调整就行，实现效果如下。 1、NavBar.js import Taro from '@tarojs/taro'; import React, { Component } from 'react' import { View
uniapp 开发微信小程序 头部适配
qq_27487739的博客
06-10 2131
文件中，通过添加自定义头部组件和设置 padding-top 来实现头部自定义的适配。文件中，可以通过添加自定义头部组件来实现头部的自定义。表示设置页面内容的顶部距离为头部的高度，确保内容不会被头部遮挡。在 UniApp 中，在微信小程序开发中，头部适配可以通过修改。文件中，可以为每一个页面单独设置导航栏样式，具体的配置项是。在 UniApp 项目的根目录中找到。例如，如果需要自定义头部样式，可以在。文件中为某个页面设置。/* 页面内容样式 *//* 头部样式 *//* 头部高度 */
小程序 自定义导航（适配所有手机包括刘海屏），iPhone8以上机型的底部横条遮挡问题
前端技术
07-10 6414
自定义导航步骤，适配所有手机
微信小程序适配iphonex
Dreawer微信小程序联盟
04-26 5354
 // 在app.js中判断是否是哪种设备 globalData: { isIphoneX: false, userInfo: null }, onShow:function(){ let that = this; wx.getSystemInfo({ success: res=&gt;{ // console.log('手机信息res'...
小程序自定义导航栏全机型适配实战
本文主要介绍如何在微信小程序中实现自定义导航栏的兼容适配，以便在导航栏中集成更多功能，如搜索框、自定义背景和返回首页按钮。通过一系列步骤，包括隐藏官方导航栏、计算不同机型的导航栏高度、编写新的导航栏...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值