微信小程序100vh和windowHeight不一样高

最新推荐文章于 2024-07-11 20:30:00 发布
最新推荐文章于 2024-07-11 20:30:00 发布
阅读量400 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/me_reader/article/details/131409990
这篇文章展示了如何在小程序中获取窗口高度并应用于页面布局。通过WXML定义视图结构，使用WXSS设置视图样式，如百分比宽度和自动居中，同时JS部分在页面加载时获取系统信息以确定窗口高度。

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

效果：

基础库版本：

  

代码：

wxml

<view class="container">
	<view class="f">
		<view class="s" style="height: {{windowH/2}}px;"></view>
	</view>
</view>

wxss

.container {
  width: 100vw;
  height: 100vh;
}

.f {
  width: 90vw;
  height: 50vh;
  background-color: lightpink;
  margin: 0 auto;
}

.s{
  width: 90%;
  background-color: lightblue;
  margin: 0 auto;
}

js

Page({
  data: {
    windowH: 0,
  },
  onLoad() {
    wx.getSystemInfo({
      success: res => {
        this.setData({
          windowH: res.windowHeight
        })
      }
    })
  },
})

紫色苦茶
关注
微信小程序中的vw和vh单位
kerryqpw的博客
07-11 2万+
微信小程序中的vm和vh单位
微信小程序
GU_AO_SHI_TAI_DU的博客
07-08 1725
微信小程序第一章---小程序微信生态圈第二章 第一章—小程序微信生态圈 2011年1月21日，腾讯公司推出一个即时通讯服务的免费应用程序，由张小龙带领的腾讯广州研发中心产品团队打造 张小龙（腾讯广州研发中心团队经理）：团队经理张小龙所带领的团队曾成功开发过QQ邮箱等互联网项目 腾讯公司总裁马化腾在产品策划的邮件中确定了这款产品的名称叫做“微信”。 小程序：英文名 Mini Program 　...
微信小程序（uniapp）获取窗口高度
m0_75230853的博客
06-20 827
【代码】微信小程序（uniapp）获取窗口高度。
微信小程序获取windowHeight可使用窗口高度不一致问题
_是鱼的博客
02-02 1254
在没有tabBar的页面中，需要在onReady中获取高度，才能准确的获取到准确的高度，在页面渲染之前获取的高度是减去tabBar之后的高度
小程序设置height:100vh导致页面超出屏幕可以上下滑动
me_reader的博客
05-27 2011
在手机上测试的时候页面可以上滑且出现一条白色的线条。给页面添加`position: fixed`
微信小程序——VW、VH
tingyu_的博客
04-18 5687
vw和vh是css3中的中的新单位，是一种视窗单位，小程序中也同样适用 小程序中，窗口固定宽度为100vw，将窗口宽度平均分为100份，每一份是1vw。 小程序中，窗口固定高度为100vh，将窗口高度平均分为100份，每一份是1vh。 ...
微信小程序实现仿微信聊天界面(各种细节处理)
热门推荐
盛国强的博客
01-07 7万+
话不多说，美图镇楼： 下面先来看看效果 为实现这样的效果，首先要解决两个问题： 1.点击输入框弹出软键盘后，将已有的少许聊天内容弹出，导致看不到的问题； 2.键盘弹出或收起时，聊天消息没有自动滚到最底部。 首先解决第二个问题，自动滚动到最底部，这很简单，这里提供三种方法（推荐第三种）： 1.计算每条消息的最大高度，设置scroll-top=(单条msg最大高度 * msg条数)px。 2.用 将...
uniapp微信小程序发布h5适配
EEstefan的博客
12-26 2879
背景 这次项目是要兼容微信小程序、h5的。目前开发完成发现，微信小程序和手机浏览器打开h5，页面都是正常的。在PC浏览器和ipad上打开H5，出现了布局和字体错乱。 解决步骤 自定义模板路径 在manifest.json H5配置中，填写 index.html 模板路径 这是为了方便些条件编译当在h5下的时候 在index.template.html中 <!DOCTYPE html> <html lang="zh"> <head> <link rel="shor
微信小程序（布局适配与物理逻辑像素）
zuomengjia的博客
11-21 893
前言 移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等，本节来详细介绍下 关键词： 屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等。 屏幕尺寸 华为荣耀7 图上写的是5英寸。那么这个5英寸到底是怎么算出来的呢？ 先进行一下单位的换算1英寸（inch）=2.54厘米（cm） 屏幕尺寸指...
微信小程序之导航栏样式修改、自定义导航栏及封装
流星宇
09-27 1万+
在微信小程序中我们会经常看到不同字样的顶部标题，这样的样式有的是一样的，而有的却又是不同的导航栏，这是怎么回事呢，在这里我们就探讨一下。(微信小程序json文件不能有注释，复制过去的时候有注释记得自行删除，希望能帮到大家，喜欢的给个赞，感谢) 一、使用微信小程序的默认导航栏 1、在app.json中进行如下配置则能够实现全局的顶栏 "window":{ "navigationBa...
论小程序height:100vh或100%的大坑
Anlantic的博客
07-11 954
1、scroll-y使用变量控制，输入框聚焦设置设置为false,失去焦点设置为true。问题也相当于没解决。咦，解决方案的高度100vh怎么和我的那么像呢，于是抱着试试的心态，将scroll-view的height改为了height:calc(100vh - 1rpx),然后发现成了。问题：原生小程序使用scroll-view包裹的很多输入框(input),当输入内容时，输入框的文字会向上跑，就是错位的问题。2、使用input的always-embed设置为true,对于我的问题没解决。
微信小程序-屏幕高度分析详解
qq_46199553的博客
07-28 8908
微信小程序高度
微信小程序页面高度100%
haohaoxueqd的博客
07-08 504
page {
微信小程序windowHeight每个页面值不一致解决方案
一个程序员的博客
05-07 8566
微信小程序实现一个功能，让头部固定，下面动态滚动的效果，如下图所示 具体的实现思路是，用wx.getSystemInfo获取可使用的屏幕高度减去头部的固定高度，作为滚动层scroll-view的使用高度； 核心代码如下 var that = this wx.getSystemInfo({ success: function (res) { th...
小程序和移动端100vh的区别
qq_51528868的博客
12-16 699
在小程序中如果配置了系统自带的导航栏和tabBar，小程序的100vh它会自动减去系统配置的导航栏和tabBar的高度，只显示中间的部分的高度。而浏览器，因为浏览器没有系统自带的导航栏和tabBar，所以浏览器的100vh没有减去导航栏和tabBar的高度。"navigationStyle":"custom" 去除系统自带的导航栏。"custom":true 去除系统自带的tabBar。
微信小程序之px、rem、px、vw、vh
GeeLoong`s Blog
10-24 2493
rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。 无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px。 微信小程序同时也支持rem尺寸单位， rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37.5...
微信浏览器
Ellie棒棒哒的博客
02-26 888
微信浏览器
对微信小程序的一些用法的感悟和总结
qq_48701278的博客
05-03 2017
文章目录前言一、一些代码句的用法1， page页面下有多余空白区域 min-height:100vh;2，3，4，5，6，7，8，二、一些代码句的组合1，2，3，4，5，6，7，8，总结 前言 过去的半年都在做一个项目，我的分工是小程序前端，最近开始着手结项工作，想着把wxml和wxss里面一些我刚上手时不了解或者遇到的一些问题和用法总结一下。各个组件的用法我就不展开说了，官方文档上的属性和例子都很好，可以去看一下，这里是微信官方小程序文档链接：微信开放文档 现在进入正题~~ 一、一些代码句的用法
微信小程序填坑之路：布局适配方案（rpx、px、vw、vh）
Purpletaro的专栏
07-15 2715
因为小程序是以微信为平台运行的，可以同时运行在android与ios的设备上，所以不可避免的会遇到布局适配问题，特别是在iphone5上，因为屏幕尺寸小的缘故，也是适配问题最多的机型，下面就简单介绍几种适配方法。 rpx适配 rpx是小程序中的尺寸单位，它有以下特征： 小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此 1rpx=（screenWidth / 750）px，其中screenWidth为手机屏幕的实际的宽度（单位px），例如iphone6...
钉钉小程序如何监听页面触底
最新发布
03-23
<think>嗯，用户问的是钉钉小程序如何监听页面触底。这个问题我需要先回忆一下钉钉小程序的文档。钉钉小程序是基于支付宝小程序框架的，所以很多API和机制应该类似。 首先，页面触底通常是指用户滚动到页面底部，需要加载更多内容的时候。在微信小程序里，是用onReachBottom事件，不知道钉钉是不是一样的。不过得确认钉钉的文档。 然后，可能涉及到页面生命周期函数。钉钉小程序的页面有哪些生命周期呢？比如onLoad, onShow, onReady这些，还有没有专门处理页面滚动的函数？ 我记得支付宝小程序里有个onReachBottom，钉钉应该也是继承了这个。所以可能是在页面的js文件中定义onReachBottom方法。用户需要在这个方法里写加载数据的逻辑，比如分页加载。 另外，可能还需要注意触发条件，比如页面滚动到底部多少距离才会触发，或者是否需要配置触发阈值。有的框架允许设置触发距离，比如距离底部多少像素时触发，可能需要检查是否有相关的配置项。 还要考虑滚动视图的情况。如果页面用了scroll-view组件，可能onReachBottom不会生效，这时候需要在scroll-view里绑定滚动事件，自己判断是否触底。但钉钉的onReachBottom可能只适用于页面的原生滚动，而不是scroll-view内部滚动。 然后，用户可能需要代码示例，比如在Page对象里添加onReachBottom函数，在里面处理数据加载，同时设置loading状态防止重复请求。还有分页参数的管理，比如当前页码，是否还有更多数据等。 另外，需要提醒用户注意性能，比如避免频繁触发，或者处理网络请求失败的情况。可能还需要展示一个简单的示例代码，说明如何定义这个函数，以及相关的配置项。 总结一下步骤应该是：1. 在页面的js文件中定义onReachBottom生命周期函数。2. 在该函数内实现数据加载逻辑，比如请求下一页数据。3. 配置触发的阈值，如果有需要的话。4. 处理加载状态和分页参数。5. 注意在scroll-view中的不同处理方式。 可能还需要检查钉钉小程序的官方文档，确认onReachBottom是否存在，以及是否有其他注意事项。比如，触发条件是否是页面滚动到底部，或者是否需要页面有足够的内容才能触发。如果页面内容不够一屏，可能不会触发，这时候需要前端自己处理。 最后，确保用户明白如何将这些代码整合到自己的项目中，以及如何处理常见的错误，比如重复加载、加载提示等。可能还需要提到使用loading动画，提升用户体验。</think>钉钉小程序监听页面触底的实现步骤如下： --- ### 一、核心原理 钉钉小程序基于支付宝小程序框架，通过 **`onReachBottom` 生命周期函数** 监听页面触底事件。当用户滚动至页面底部时自动触发，常用于分页加载数据。 --- ### 二、具体实现步骤 #### 1. 在页面JS文件中定义生命周期函数 ```javascript Page({ // 页面触底时触发 onReachBottom() { console.log('页面触底，开始加载下一页数据'); // 调用加载数据的业务逻辑 this.loadNextPage(); }, // 示例：分页加载方法 loadNextPage() { // 1. 检查是否正在加载或已无更多数据 if (this.data.isLoading || !this.data.hasMore) return; // 2. 显示加载状态 this.setData({ isLoading: true }); // 3. 发起网络请求获取下一页数据 dd.httpRequest({ url: 'your_api_url', data: { page: this.data.currentPage + 1 }, success: (res) => { // 4. 更新数据和页码 this.setData({ list: [...this.data.list, ...res.data.list], currentPage: this.data.currentPage + 1, hasMore: res.data.hasMore }); }, complete: () => { // 5. 隐藏加载状态 this.setData({ isLoading: false }); } }); } }); ``` #### 2. 配置触发阈值（可选） 在页面JSON文件中，通过 `onReachBottomDistance` 设置触发距离（单位：px）： ```json { "window": { "onReachBottomDistance": 100 // 距离底部100px时触发 } } ``` --- ### 三、注意事项 1. **原生滚动限制**： - `onReachBottom` 仅对页面级滚动生效 - 如果使用 `scroll-view` 组件，需通过 `bindscrolltolower` 事件自行实现 2. **性能优化**： - 添加防抖逻辑避免频繁触发 - 及时更新 `hasMore` 状态防止无效请求 - 使用骨架屏提升用户体验 3. **兼容性问题**： - 不同客户端容器可能有细微差异，建议真机测试 --- ### 四、扩展方案：scroll-view 实现 ```javascript // WXML <scroll-view scroll-y style="height: 100vh" bindscrolltolower="handleScrollToLower" > <!-- 内容区域 --> </scroll-view> // JS Page({ handleScrollToLower() { this.loadNextPage(); } }) ``` 建议根据具体场景选择原生页面滚动或自定义滚动容器方案。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值