首页 > 其他分享 >uniapp在H5中排除底部和顶部导航栏

uniapp在H5中排除底部和顶部导航栏

时间:2024-02-02 10:12:03浏览次数:39  
标签:uniapp 顶部 高度 H5 底部 导航

在app和小程序中,uniapp的100vh不会将底部和顶部导航栏的高度放进去,所以100vh就是整个中间内容的高度,但是在H5中100vh是把顶部和底部导航栏一起放进去的高度,所以为了要在顶部和顶部导航栏排除在H5应用中,需要在内容的高度里设置一下,减去顶部和底部的导航栏高度,为此在uniapp中使用了--window-bottom--window-top来表示底部和顶部的导航栏的高度,注意:这个高度是默认的高度,如果是你自定义的话还是需要自己去设置这个值。
所以如果在首页要加一个自己的悬浮按钮,比如fab-button,那么他的底部可以设置为calc(var(--window-bottom) + 60rpx)这样来让他始终保持在底部导航栏之上60rpx的高度

标签:uniapp,顶部,高度,H5,底部,导航
From: https://www.cnblogs.com/xxss0903/p/18002622

相关文章

  • 很好用的python游戏环境(续2):强化学习算法走迷宫游戏环境(导航问题 navigation):分享一个py
    相关前文:很好用的python游戏环境(续):强化学习算法走迷宫游戏环境(导航问题navigation):分享一个python语言的迷宫游戏环境项目的GitHub地址:https://github.com/Wonz5130/Maze_AIPS.这个游戏有个非常严重且致命的error,那就是单击这个游戏界面的时候会自动转成AI执行,否则就是人......
  • 很好用的python游戏环境(续):强化学习算法走迷宫游戏环境(导航问题 navigation):分享一个pyt
    相关:很好用的python游戏环境:强化学习算法走迷宫游戏环境(导航问题navigation):分享一个python语言的迷宫游戏环境前文分享了一个python下的maze游戏环境,本文再给出一个不错的实现项目,这个项目的实现更加的简单,并且可视化界面做的很好看,是用tkinter框架做的可视化:相关:迷宫游戏p......
  • 很好用的python游戏环境:强化学习算法走迷宫游戏环境(导航问题 navigation):分享一个pyth
    项目的GitHub地址(作者:莫凡):https://github.com/MorvanZhou/mmaze运行的示例代码:importmmazestart=(0,0)end=(10,10)m=mmaze.generate(width=11,height=11,symmetry="horizontal")solutions=m.solve(start=start,end=end)m.plot(solution=solutions[0],......
  • 微信H5分享不能展示卡片问题
    来源与微信开放社区微信H5已成功接入,微信api以及配置项验证正常,通过手机微信里面链接打开页面进行分享,分享出去的还是链接,需要从以下场景进入才可以正常分享卡片从二维码进入分享卡片进入公众号图文消息进入公众号菜单进入公众号原文链接进入通过收藏链接,再打开分享也......
  • 面试导航
    一、springSpring中@Autowired注解与@Resource注解的区别SpringBoot和SSM的区别+源码解析视频二、javajava八股概念补充 你理解的hashmap是什么三、mysqlmysql的锁总结九、分布式事务分布式事务自编十、算法raft简单回答......
  • h5 canvas 视频透明度抠图,视频需要一个灰度通道副本表示透明度
    视频透明度抠图,视频需要一个灰度通道副本表示透明度目前抖音等直播平台的礼物特效就是这个方法处理的 <!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>视频灰度通道抠图,视频包含灰度值表示透明的副本</title><style>html,body{ ::-......
  • 企业微信自建H5应用缓存问题
    1、在企业微信界面按ctrl+shift+alt+D打开调试模式 2、在进入本地会议预约应用后,右击页面点showDevTools3、勾选Disablecache(停用缓存)4、刷新应用页面5、在企业微信界面按ctrl+shift+alt+D关闭调试模式 ......
  • Vue3+Vant+Vite H5移动端开发(二)
    vue3项目创建使用vue创建项目命令npmcreatevue@latest基础配置配置IP和localhost打开项目,修改'package.json'文件下的‘scripts’配置--host0.0.0.0显示ip地址可以打开项目--open启动项目,在浏览器中自动打开"scripts":{"dev":"vite--host0.0.0.0......
  • vue3+ts使用插件vue3-esign完成签字、重签(h5、vant)
    1.安装vue3-esign:npmivue3-esign2.main.ts中引入:importVue3Esignfrom'vue3-esign'app.use(Vue3Esign)3.页面中代码:<van-nav-bartitle="手写签字"left-arrowfixed/><divid="sign_box"><divclass="text&......
  • 前端必学-40个精选案例实战-案例4-仿B站导航条案例【基础样式】
    交互方式:CSS样式和HTML的交互方式CSS是控制html的,我们需要选中元素再进行控制CSS的常见使用方式分别是行间式、内嵌式与外链式<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE......