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

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

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

  1. object 参数说明
参数类型必填
successFunction
failFunction
completeFunction
  1. 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    // 节点的dataset
     	 res.width      // 节点的宽度
     	 res.height     // 节点的高度
       	 res.scrollLeft // 节点的水平滚动位置
   	     res.scrollTop  // 节点的竖直滚动位置
         res.scrollX    // 节点 scroll-x 属性的当前值
      	 res.scrollY    // 节点 scroll-y 属性的当前值
      		// 此处返回指定要返回的样式名
      	 res.margin
      	 res.backgroundColor
    })
  }
})

selectorQuery 对象的方法列表

方法参数参数
inobject Component将选择器的选取范围更改为自定义组件component内。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点。)
selectselectorselector类似于CSS的选择器
selectAllselector在当前页面下选择匹配选择器selector的节点,返回一个NodesRef对象实例。 与selectorQuery.select(selector)不同的是,它选择所有匹配选择器的节点。
selectViewport选择显示区域,可用于获取显示区域的尺寸、滚动位置等信息,返回一个NodesRef对象实例。
exec[callback]执行所有的请求,请求结果按请求次序构成数组,在callback的第一个参数中返回。
  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值