微信小程序宽高适配
2024-08-21 17:38:36
小程序的宽任何机型都是750rpx,但是画布canvas的默认单位是px,可能会出现需要怪异的样式,我们可以用到
wx.getSystemInfoSync().windowWidth和
wx.getSystemInfoSync().windowHeight分别获取到窗口的宽高,请注意获取到的宽高单位都是px,所以需要利用宽度和750的比值转换一下;
此外,小程序scroll-view组件也会遇到高度适配的问题,scroll-view需要给他一个固定的高度,但是所有的机型都用同一个高度就可能会出现scroll-view铺不满剩余高度,所以可以通过wx.getSystemInfoSync()获取到屏幕的可用高度,减去其他固定的高度就可以让scroll-view组件的铺满剩余的屏幕高度,避免不同机型出现怪异现象;
例如:我们已知该页面除了scroll-view组件以外其余的组件高度为150rpx; scroll-view组件的高度应该怎么做适配呢?
onload: function(){
var windowWidth = wx.getSystemInfoSync().windowWidth;
var windowHeight = wx.getSystemInfoSync().windowHeight;
//rpx与px单位之间的换算 : 750/windowWidth = 屏幕的高度(rpx)/windowHeight
var scroll_height = 750*windowHeight/windowWidth-150;
this.setData({
scroll_height:scroll_height
})
}
然后通过行内式把scroll-view组件的高度样式填充完毕就完成了。
<scroll-view style="height:{{scroll_height}}rpx;">这里是scroll-view的内容</scroll-view>
最新文章
- js模拟抛出球运动
- C#树状图 初始默认选中节点
- everthing 添加右键菜单
- php缓存技术总结
- iOS开发——高级篇——iOS 中的 NSTimer
- jenkins2 multibranch
- 转:LAV Filter 源代码分析
- WINDOWS渗透与提权总结(1)
- __set(),__get() 魔术方法示例
- 如何将cmd中命令输出保存为TXT文本文件
- Android --SwipeRefreshLayout 下拉刷新
- Operator overloading
- MYSQL自动备份策略的选择
- ODB 短板
- Windows打印体系结构之Print Spooler概念与架构
- Win10下JDK下载与环境变量配置
- SQL Server 2000 字段类型 Delphi 数据类型对照
- Rimworld单人生存记
- python os module
- Retrofit2+Rxjava2的用法
热门文章
- CentOS7 防火墙配置firewall-cmd
- [LOJ#2542] [PKUWC2018] 随机游走
- BZOJ3668:[NOI2014]起床困难综合症——题解
- React的setState执行机制
- Rabbitmq----基础使用
- C. Line (扩展欧几里得)
- 微服务与devops的文章推荐
- SSH客户端,FinalShell服务器管理,远程桌面加速软件,支持Windows,Mac OS X,Linux,版本2.6.3.1
- ZooKeeper概述(三)
- SPOJ AMR11E Distinct Primes 基础数论