微信小程序rpx布局，scroll-view高度计算

最新推荐文章于 2025-05-20 10:45:51 发布

Jacker-

最新推荐文章于 2025-05-20 10:45:51 发布

阅读量6.1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签： rpx

本文链接：https://blog.youkuaiyun.com/weixin_37928483/article/details/80949459

微信小程序专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在微信小程序中根据设备屏幕尺寸动态调整scroll-view组件高度的方法。通过使用wx.getSystemInfo获取设备窗口的高度和宽度，计算出与750rpx基准宽度对应的rpx值，从而实现不同设备上scroll-view组件的高度自适应。

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

由于小程序的屏幕宽度总是 750rpx

所以我们可以根据宽高比来算出屏幕高度的rpx

    wx.getSystemInfo({
             success: function (res) {
                let clientHeight = res.windowHeight,
                    clientWidth = res.windowWidth,
                    rpxR = 750 / clientWidth;
                var calc = clientHeight * rpxR;
                console.log(calc)
                that.setData({    
                      windowHeight: calc
                });
             }
        });

作用就是scroll-view的情况下动态设置高度

<scroll-view style='height:{{windowHeight-80}}rpx;'>

</scroll-view>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Jacker-

关注关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序获取滚动条高度_微信小程序设置滚动条过程详解

weixin_32821813的博客

01-17

1609

原因原来在app.wxss中定义了如下的内容【不知道是不是新建项目自动生成的，这里也就提供了隐藏滚动条的思路啦】::-webkit-scrollbar {width: 0px;height: 0px;color:#transparent;}what, 宽高为0，而且还是透明的，难怪，好吧，修改宽高4px，color设置为green，以为可以了，呵呵，太年轻。scroll-viwe依然没有滚动条，以...

微信小程序动态设置scroll-view的高度，实现只有scroll-view区域可以滚动

weixin_48952990的博客

07-13

2070

动态设置scroll-view的高度

参与评论您还未登录，请先登录后发表或查看评论

微信小程序中scroll-view中不设定高度实现自动滚动

09-17

在微信小程序中scroll-view沿y轴进行滚动时需要设定固定高度，现通过样式和布局实现高度自适应不设定高度

微信小程序scroll-view使用全攻略

最新发布

爱的叹息的专栏

05-20

586

本文介绍了如何在微信小程序中使用 scroll-view 组件实现水平和垂直滚动功能。示例代码包括 WXML、WXSS、JS 和 JSON 文件，展示了如何配置 scroll-view 的基本属性，如 scroll-x 和 scroll-y。文章还总结了 scroll-view 的常用属性，如 scroll-top、scroll-left 和 scroll-into-view，并提供了使用时的注意事项。通过该示例，开发者可以快速掌握 scroll-view 的使用方法，实现灵活的滚动效果。

微信小程序动态计算文本高度

geng97280的博客

08-26

1440

小程序动态计算内容高度实现展开与收起功能

微信小程序 场景是从接口获取一组图片，image mode模式为widthFix显示后计算最高的图片高度赋值给微信的轮播图组件高度

weixin_46337813的博客

01-18

585

<view class="tui-banner-bg" wx:if='{{detail.images.length>1}}'> <view class="tui-banner-box"> <swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="{{6000}}" duration="{{250}}" circular="{{true}}..

微信小程序中可以使用calc 函数用于动态计算长度值。

ywllllll的博客

11-10

3639

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则 ...

微信小程序 scroll-view 水平滚动实现过程解析

10-16

同时，`.scroll-view-item` 使用 `display: inline-block` 让每个项目并排显示，通过设置 `width` 和 `margin-left` 控制项目的布局。 ```css .scroll-wrap { min-width: 100%; height: 360rpx; white-space: ...

微信小程序-scroll-view滚动到指定位置（类似锚点）

03-29

本文作者：莫兰迪不会没有瓶子，来自原文地址先来说一下官网例子吧 ...scroll-view竖向滚动必须设置scroll-y="true" style="height: 200rpx;" 必须.. style="height: 200rpx;" 必须为200rpx/200px 不能用百分号 js中

微信小程序两个scroll-view 联动

yfm120750310的博客

03-18

1362

需求看一下需求，实现一个两周之内录音棚页面的预定，表格左右滑动时左边列不动，表格上下滑动时上边行不动解决方案左边和右边变成一个模块，监听scroll右滑事件代码 wxml  <view class="container"> <view class="title">录音棚预定</view> <picker bindchange="bindPickerChan

记录微信小程序 height: calc(xx – xx)；无效问题

12-30

遇到一个小问题，记录一下问题：在微信小程序中使用scroll-view标签时，用height:cale(xx – xx)设置高度无效，在page中设置高度为百分百依旧无效解决办法：直接在最大的view标签中设置高度为百分百即可  page { height: 100%; } .videoList { height: calc(100% - 480rpx); }

小程序高度计算自适应

qq_29712053的博客

08-13

2139

在小程序中使用scroll-view需要设置一个确定的高度值，所以经常需要计算页面的高度。 computeScrollViewHeight() { let that = this this.clientHeight = wx.getSystemInfoSync().windowHeight; this.clientWidth = wx.getSystemInfoSync(...

uniapp微信小程序scroll-view动态style样式高度和宽度中的calc属性

FUFCY的博客

03-24

2493

<scroll-view class="gd_z" scroll-y="true" style="height: calc(100vh - {{statusBarHeight*2.3 +70}}rpx);"></scroll-view> //statusBarHeight是变量要用{{}}这个就可以了

微信小程序——less自动计算方式(calc)

qq_43201350的博客

01-19

1818

.demo { height : calc (100vw * 352 / 1125) }

微信小程序scroll-view(或者其他view) 计算高度 px转rpx有关

aaa002002的博客

03-22

297

wx.getSystemInfo({ success: function (res) { that.globalData.winWidth = res.windowWidth; that.globalData.winHeight = res.windowHeight; } }) 以上，app.js...

css计算函数 scalc 微信小程序_【报Bug】CSS变量微信小程序不支持计算

weixin_39683163的博客

01-12

397

详细问题描述(DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题)[内容]状态栏高度的CSS变量var(--status-bar-height)在微信小程序中通过calc计算不起作用重现步骤[步骤][结果][期望][如果语言难以表述清晰，拍一个视频或截图，有图有真相]IDE运行环境说明[HBuil...

css计算函数 scalc 微信小程序_面试问题总结

weixin_28963665的博客

02-23

744

1、响应式布局一、相对长度单位。其长度单位会随着它的参考值的变化而变化。px,像素em,元素的字体高度%,百分比rem,根元素的font-sizevm,视窗宽度，1vw=视窗宽度的1%vh,视窗高度，1vh=视窗高度的1%二、如何实现移动端字体大小屏幕自适应，百分比方法的缺点，rem的作用(1)用媒体查询+rem@media only screen and (min-device-width: ...

微信小程序--calc无效问题

blwinner的专栏

05-19

3666

问题在使用scroll-view时，用height: calc(100% - 180rpx);设置高度无效百度在网上查了一下, 基本都是一个办法, 就是给scroll-view加一个父元素, 给父元素设置高度. 但是根据官方文档, scroll-view必须设置height属性才能正确滚动分析其实问题出在了100%, 如果设置为100%, 就会默认用滚动组件中的所有元素把当前页面撑开, 比如每个元素高100rpx, 共有10个, 屏幕高度800rpx, 那么100%=1000rpx, 所以前面的.

微信小程序中使用calc（）的注意事项