微信小程序: 顶部导航悬浮及view 高度判断

最新推荐文章于 2025-02-28 14:41:49 发布
最新推荐文章于 2025-02-28 14:41:49 发布
阅读量6.6k 收藏 2
点赞数 1
分类专栏： 微信小程序 文章标签： 微信小程序 微信开发 滚动监听事件 view高度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u013351145/article/details/80020217
版权
博客展示了微信小程序创建三个view的效果图，代码未给出，若有需要可私信获取。涉及微信小程序开发、滚动监听事件及view高度等信息技术相关内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果图：


创建三个view



代码不多，我就随便截下图，没有代码，如果有需要私信我。

微信小程序自定义导航栏 胶囊菜单按钮高度完美适配
aaa123aaasqw的博客
02-27 3912
导航栏高度 = menu.statusBarHeight + menu.height + (menu.top - menu.statusBarHeight) * 2。观察发现，胶囊顶部高度距导航栏顶部高度的高度差 和 胶囊底部高度距导航栏底部高度的高度差，是一样的。这是在没有设置自定义时的原生导航栏，我们发现整体的高度就是 （状态栏高度 + 导航栏高度）上图适配做的最好的是某东，但仔细看仍会有一点错位，但输入框的颜色，淡化了这种不和谐感。也就是说 导航栏高度 = 胶囊高度 +（高度差）x 2。
小程序悬浮按钮，悬浮导航球
05-21 1682
一个开源的悬浮按钮组件，小程序原生支持。 一直很喜欢华为的导航按钮，能够完美适合大屏手机，自由停放位置，不论是左手习惯还是右手习惯，都很方便(可能我手比较小，左右上角够不着）。 支持功能 支持自由拖动，停放 支持自定义事件(单击，双击，长按) 支持自定义导航球中间的文字/图片 开发难点 使用wxs 悬浮球的开发思路比较简单，一个view，样式position:fixed，支持拖动。在web开发中，我们能够比较容易实现这样的功能。要想在小程序中实现高性能的交互动画(touch类)，一定要了解如何使用页面.
微信小程序获取状态栏高度，兼容老版
最新发布
WenZhengshi的博客
02-28 157
【代码】微信小程序获取状态栏高度，兼容老版。
小程序自定义顶部导航栏，uni-app微信小程序自定义顶部导航栏
程序猿的秃头之路
06-24 7408
uni-app微信小程序自定义顶部导航栏
小程序自定义导航栏高度计算
今天bug有点多
06-19 718
【代码】小程序自定义导航栏高度计算。
微信小程序-右侧浮动导航
12-14
微信小程序-右侧浮动导航，微信小程序-右侧浮动导航，微信小程序-右侧浮动导航，微信小程序-右侧浮动导航，
悬浮导航栏
qq_33265437的博客
02-04 678
今天让我 使用 ItemDecoration 来完成 可推动的悬浮导航栏的效果，最终实现的效果如下图： 具体实现步骤如下： 根据我前面的文章所讲的RecyclerView的基本使用，我们先来完成基本的recyclerView： 第一步：布局里写一个RecyclerView 第二步：实例化 recyclerView = (RecyclerView) findView
微信小程序实现翻牌抽奖动画
10-14
在微信小程序中实现翻牌抽奖动画，涉及到的主要知识点包括微信小程序的基本结构、样式设计、事件绑定、动画效果以及状态管理。下面将详细讲解这些内容。 1. **微信小程序基本结构**： 微信小程序由四部分组成：`...
自定义微信小程序顶部导航栏（自适应微信胶囊按钮，flex布局）
周周池的博客
08-09 2697
在之前完成的小程序项目中，遇到微信顶部导航栏高度，在不同手高度不一样问题（不适配微信胶囊按钮）。总结了一下特发这篇文章整理思路 问题 一个前端，肯定不希望页面结构不好看。客户、老板、自己不满意啊 解决方法 通过uni.getSystemInfo获取系统信息（用来手机状态栏高度），因为状态栏的高度不同的手机是不一样的，状态栏如下 通过uni.getMenuButtonBoundingClientRect()获取微信小程序胶囊按钮的信息（top：胶囊按钮上边界坐标、height：胶囊按钮的高度） 通过w
微信小程序滑动切换导航，导航栏跟随顶部tab导航滚动
厦门在乎科技
09-06 5863
前言 很多App都有这种设计，例如淘宝、爱奇艺、今日头条、知乎等都有用到，大部分的App都会用到这种设计，非常主流。 tab导航栏使用<scroll-view>标签，内容使用<swiper>，不多说，直接上代码，为了更真实展示实例的使用，我直接就配置了服务器来取数据进行渲染。 index.wxml <view class="container"> <!-- tab导航栏 --> <!-- scroll-left属性可以控制滚动条
微信小程序推荐：B站首页界面设计：附详细教程
06-01
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的应用体验。本教程将聚焦于如何设计并开发一个类似B站（哔哩哔哩）首页的微信小程序，帮助开发者掌握小程序界面设计...
JS实现悬浮导航(实用)
05-05
浏览网页时，滚动鼠标拉动网页后，导航不消失，悬浮于浏览器上。用户体验很好，实用性很强，很多知名网站在使用，前端学习者必会的技能。
悬浮导航无js实现
奋斗小强的博客
07-24 929
利用display:none;这一属性，实现鼠标悬浮出现内容的效果； 简单的案例如下： &lt;ul class="sidebar"&gt; &lt;li class="sidebar_li sidebar_li1"&gt; &lt;div class="sidebar_content sidebar_content1"&gt; &lt;
导航及悬浮层制作模板与技巧
normol的博客
01-24 966
技巧一：如图 即：悬浮层类似于从侧栏伸展出来的效果 XX .menu li:hover .submenu{display: block;} .submenu{ display: none; padding-left: 20px; width: 500px; border:1px solid #999; position: absolute; top:35px; l
掌握微信小程序悬浮框技巧，提升互动新境界！
weixin_45734165的博客
08-21 645
通过以上步骤，我们可以实现在微信小程序中添加悬浮框的效果，为用户提供更加方便的操作与良好的交互体验。然而，悬浮框并非所有小程序都需要使用，需要综合考虑页面设计、用户需求和使用场景等因素。但是，想要吸引用户使用小程序、提高用户使用体验，不仅需要良好的功能，还需要考虑界面设计及用户交互。悬浮框的实现需要使用 Jquery 库，所以我们需要先将 Jquery 库引入到小程序中。通过 .show()、.fadein()、.fadeout() 等函数的结合使用，实现悬浮框的动画显示与隐藏。添加悬浮框的相关事件。
微信小程序自定义navigation导航栏，高度定义等于原始高度
leo编程博客
09-08 2748
写在前面：文章中属性是手写，如有错误，按提示改正就行。 当然第一步得设置 “navigationstyle":"custum" 也就是自定义导航栏，这时候导航栏就会消失。 我们自定义一个view，设置成导航栏的宽高，绝对定位在屏幕上就可以。 最难的地方是获取原始导航栏高度，宽度100%，这个好说。对了，这个view的父元素得设置成display:flex; flex-direction:colum，也就是用flex垂直排列。还要设置下page。整个css代码我先粘贴出来 page { ...
微信小程序页面浮动导航的实现
热门推荐
仰望星空的代码
06-02 1万+
一、前言做复杂的小程序就与web页面的区别原来越小了，一些web页面的功能会被要求添加到微信小程序页面中。二、功能页面在滑动的时候顶部页面导航跟随滑动，当点击导航中的任意一项时返回页面顶部。三、实现wxml代码：&lt;view class='container'&gt; &lt;view class='navigation {{pageVariable.isFloat == true ? "fl...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值