微信小程序获取屏幕宽度以及元素的宽高

一、微信小程序获取系统信息

微信获取系统信息函数为wx.getSystemInfo(OBJECT)

object 参数说明

参数	类型	必填
success	Function	是
fail	Function	否
complete	Function	否

success 回调参数说明

属性	说明
model	手机型号
pixelRatio	设备像素比
windowWidth	窗口宽度
windowHeight	窗口高度
language	微信设置的语言
version	微信版本号
system	操作系统版本
platform	客户端平台

二、css3引入’vm’ 和 “vh”

vm=view width ; vh=view height
以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小
例如：

view{width: 100vw;font-size: 80vw; /* 宽度为窗口100%， 字体大小为窗口宽度的10% */
}
view{height: 100vh;font-size: 80vh; /* 高度为窗口100%， 字体大小为窗口高度的10% */
}

三、获取元素的高度wx.createSelectorQuery()//获取wxml节点信息api

返回一个SelectorQuery对象实例。可以在这个实例上使用select等方法选择节点，并使用boundingClientRect等方法选择需要查询的信息。

示例代码

Page({queryMultipleNodes: function(){var query = wx.createSelectorQuery()query.select('#the-id').boundingClientRect(function(res){res.dataset    // 节点的datasetres.width      // 节点的宽度res.height     // 节点的高度res.scrollLeft // 节点的水平滚动位置res.scrollTop  // 节点的竖直滚动位置res.scrollX    // 节点 scroll-x 属性的当前值res.scrollY    // 节点 scroll-y 属性的当前值// 此处返回指定要返回的样式名res.marginres.backgroundColor})}
})

selectorQuery 对象的方法列表

方法	参数	参数
in	object Component	将选择器的选取范围更改为自定义组件component内。（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点。）
select	selector	selector类似于CSS的选择器
selectAll	selector	在当前页面下选择匹配选择器selector的节点，返回一个NodesRef对象实例。与selectorQuery.select(selector)不同的是，它选择所有匹配选择器的节点。
selectViewport		选择显示区域，可用于获取显示区域的尺寸、滚动位置等信息，返回一个NodesRef对象实例。
exec	[callback]	执行所有的请求，请求结果按请求次序构成数组，在callback的第一个参数中返回。

微信小程序获取屏幕宽度以及元素的宽高相关推荐

微信小程序radio单选框如何修改宽高及选中样式
之前写过关于多选框设置样式的办法,其实与单选框设置的方法一样,唯一不同的是,在css样式里,/* 选中后的背景样式 (红色背景无边框可根据UI需求自己修改) */的下面定义的css需要加上!im ...
微信小程序view动态长度_微信小程序实现动态获取元素宽高的方法分析
本文实例讲述了微信小程序实现动态获取元素宽高的方法.分享给大家供大家参考,具体如下: 我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuer ...
微信小程序控制盒子显示隐藏_微信小程序点击控制元素的显示与隐藏
微信小程序点击控制元素的显示与隐藏首先我们先来看一下单个点击效果我们来看一下wxml中的代码: 更多内容更多> 2017-07-27 下面的是js中的主要代码: data: { shows ...
微信小程序获取页面元素高度_微信小程序之动态获取元素宽高
我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...
微信小程序之Js修改元素样式
微信小程序和普通的前端开发有很多不同. 后者修改样式js可以操作DOM,即 document.getElementById(id).style.property=new style 但是微信的js是没 ...
Node.js+MySQL开发的B2C商城系统源码+数据库（微信小程序端+服务端），界面高仿网易严选商城
下载地址:Node.js+MySQL开发的B2C商城系统源码+数据库(微信小程序端+服务端) NideShop商城(微信小程序端) 界面高仿网易严选商城(主要是2016年wap版) 测试数据采集自网易 ...
微信小程序图片高度按照图片真实宽高比自适应
原理:image组件bindload属性前端在按照设计图定的宽度做好图片的宽高之后,如果图片的原始宽高比对应不上,那么图片就会出现拉伸变形的情况,虽然微信小程序有mode属性可以对图片进行适应,但是 ...
微信小程序删除数组指定元素
// 删除方法remove: function(array, val) {for (var i = 0; i < array.length; i++) {if (array[i] == val) ...
微信小程序合集7（体育赛事+高仿知乎+微赞论坛+数独游戏+小熊日记）

微信小程序获取屏幕宽度以及元素的宽高

一、微信小程序获取系统信息

二、css3引入’vm’ 和 “vh”

三、获取元素的高度wx.createSelectorQuery()//获取wxml节点信息api

微信小程序获取屏幕宽度以及元素的宽高相关推荐

最新文章

热门文章