一、获取手机窗口数据
- wx.getSystemInfoSync().windowWidth // 获取当前窗口的宽度
- wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度
- wx.getSystemInfoSync().model // 获取当前采用的设备
- wx.getSystemInfoSync().pixelRatio
- wx.getSystemInfoSync().language // 获取当前所采用的的语言
- wx.getSystemInfoSync().version // 获取当前设备的版本
二、获取dom元素
var query = wx.createSelectorQuery(); // 创建节点选择器query.select('.list').boundingClientRect(res=>{ console.log(res) // 获取class为list的节点});query.selectViewport().scrollOffset();query.exec((res) => { var listHeight = res[0].height; // 获取list高度});// 注意:res[0]为当前节点的详细数据;res[1]为显示区域的竖直滚动位置;query.exec((res) => {})中的回调函数是最后执行的,若要获取高度等信息进行操作的话,要在回调函数中进行。
================================= 华丽的分割线 =============================
由于最近开发小程序遇到了相关dom操作的问题,所以在此做下详细介绍:
由于微信官方禁止小程序操作dom元素,因而无法像前端一样操作小程序DOM,好在官方提供了API ,
这个api叫做 wx.createSelectorQuery(), 官方定义:返回一个 SelectorQuery 对象实例。
这个api的select()方法用于查找元素,类似jq的元素选择器
然后有 boundingClientRect(function(res){}) 则返回指定元素的DOM属性,res代表元素本身,(百度了 boundingClientRect :边界中心)
再之后的exec(function(rect){})则是设置元素属性,rect在这里指的是所有匹配到结果的集合,通过调用that/this.setdata({})可以更改元素dom值,请注意!rect是一个数组集合,想要设置某一个元素,需要给该数组加指定元素的下标!
看下面代码:
onReady: function () { var that = this const query = wx.createSelectorQuery(); query.select('.cont1').boundingClientRect(function (res) {//这里返回元素自身的DOM属性 console.log(res); }).exec(function(rect){ that.setData({ swiperHeight: rect[0].height + 0 }) // rect返回一个数组,需要使用下标0才能找到 // console.log(s[0].height) }); },
网上听大佬说偶尔会有rect返回为null的意外,昨晚翻遍百度,终于找到了一个解决方法,感谢那位大佬(传送门)
setTimeout(function () { var query = wx.createSelectorQuery(); query.select('.cont1').boundingClientRect(); query.exec(function (rect) { if (rect === null) return; that.setData({ swiperHeight: rect .height + 10 }) }); }, 500)
以上,有问题欢迎指出!
来源地址:https://blog.csdn.net/dave_hz/article/details/130280087