微信小程序宽高适配
小程序的宽任何机型都是750rpx,但是画布canvas的默认单位是px,可能会出现需要怪异的样式,我们可以用到
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>
微信小程序宽高适配的更多相关文章
- 微信小程序获取高宽uniapp
代码片段 <template> <view> <view class="text" id="w">补充文字</view ...
- 微信小程序开发日记——高仿知乎日报(下)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...
- 微信小程序 canvas 字体自动换行(支持换行符)
微信小程序 canvas 自动适配 自动换行,保存图片分享到朋友圈 https://github.com/richard1015/News 微信IDE演示代码https://developers.w ...
- 微信小程序学习指南
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信 小程序 drawImage wx.canvasToTempFilePath wx.saveFile 获取设备宽高 尺寸问题
以下问题测试环境为微信开发者0.10.102800,手机端iphone6,如有不对敬谢指出. 根据我的测试,context.drawImage,在开发者工具中并不能画出来,只有预览到手机中显示. wx ...
- 微信小程序之动态获取元素宽高
我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...
- 微信小程序开发日记——高仿知乎日报(上)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...
- 如何解决微信小程序界面适配问题-引用-生命周期回调函数-优化机制-样式引入
如何解决微信小程序界面适配问题 .wxss page{ height: 100%; width:750rpx; } this.setData({ imageWidth: wx.getSystemInf ...
- 高仿Readhub小程序 微信小程序项目【原】
# News #### 项目介绍微信小程序项目涉及功能 https://gitee.com/richard1015/News https://github.com/richard1015/News 高 ...
随机推荐
- 一些技巧 && 常数优化 && 出现の错误
开坑原因 7.21 今天DTZ大爷教了我一个算欧拉函数的好方法......是质因数复杂度的 这让我想到,这些小技巧小idea,很多时候,可能就是考场上最致命.最一击必杀的"大招" ...
- BZOJ1087:[SCOI2005]互不侵犯——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=1087 Description 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王 ...
- excel 列索引(数字)转列名
function index2ColName($columnNumber) { $dividend = $columnNumber; while ($dividend > 0) { $modul ...
- UIView的autoresizingMask属性研究
在 UIView 中有一个autoresizingMask的属性,它对应的是一个枚举的值(如下),属性的意思就是自动调整子控件与父控件中间的位置,宽高. 1 2 3 4 5 6 7 8 9 enum ...
- Codeforces Round #343 (Div. 2) B
B. Far Relative’s Problem time limit per test 2 seconds memory limit per test 256 megabytes input st ...
- Codeforces Round #341 (Div. 2)A
A. Wet Shark and Odd and Even time limit per test 2 seconds memory limit per test 256 megabytes inpu ...
- 树莓派使用Samba共享文件夹
转载自:http://raspberrypihq.com/how-to-share-a-folder-with-a-windows-computer-from-a-raspberry-pi/ Shar ...
- [codeforces/edu31]总结
链接:http://codeforces.com/contest/884 A题: 求86400-ai的前缀和,找到第一个大于等于给定t的即可. B题: 任意相邻两段之间必然有一个0,然后算一下至少的长 ...
- 疯狂java学习笔记
面向对象: 从现实世界中客观存在的事物(对象)出发构造软件系统,并在软件系统构造中运用人类的自然思维方式,强调直接以现实世界中的事物为中心来思考,认识问题,并根据这些事务的本质特点,将他们抽象为系统中 ...
- android 布局文件中控件ID、name标签属性的命名包含“@”、“.”、“+”等等符号的含义
1. 在项目的根目录有个配置文件“AndroidManifest.xml”,是用来设置Activity的属性的如 <?xml version="1.0" encoding=& ...