1.场景：
在某些情况下需要用到某个元素距离顶部的距离。
1.1场景一：
例如在某些小程序的详情页，由于页面展示的内容特别多，页面有好几屏的高度，辣么庞大的数据量，放在一个接口里显然是不合理的（小程序setData有1024大小限制；如果数据太大请求时间会比较长用户的页面等待时间特别长，总之一句话用户体验不好），所以就需要把接口分开为几个，同时小程序对于页面的进程数有限制（好像是5个还是几个），一次不能并发超过这个进程数量（因为页面还有一些其他请求，例如登录检测，例如pv和av的统计等等，可能会超过这个请求数）的请求，不然小程序内部机制会将超过的进程屏蔽掉，换言之，如果用户不想往下滚动，你一次请求这么大的数据量会太费用户数据流量（虽然现在大多数用户流量充足，但有些还是没那么多），体验也比较差。所以最好是，用户往下滚动了一个距离，我们再加载后续页面的数据才是比较合理的。
1.2 场景二：
在某些页面，需要做页面快捷导航，点击快捷导航，滚动到对应的高度的楼层位置，此时就需要用到获取元素距离顶部的高度问题。
2.查询小程序api文档，确实有方法可以获取，点击直接进入官网
3.代码演示：
3.1wxml
<view class='demo1 demo' id='demo1' style='height:400rpx;'>demo1</view>
<view class='demo2 demo' id='demo2' style='height:400rpx;'>demo2</view>
<view class='demo3 demo' id='demo3' style='height:400rpx;'>demo3</view>3.2js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this;
// 方式1：通过class名来获取所有的
wx.createSelectorQuery().selectAll('.demo').boundingClientRect().exec(function(res) {
var resmy = res[0];
console.log(resmy)
// console.log(resmy[0].top)
// console.log(resmy[1].top)
// console.log(resmy[2].top)
});
// 方式2：通过id来获取
console.log('另一种方式：===========')
wx.createSelectorQuery().select('#demo1').boundingClientRect().exec(function (res) {
var resmy = res[0];
console.log(resmy)
// console.log(resmy.top)
});
wx.createSelectorQuery().select('#demo2').boundingClientRect().exec(function (res) {
var resmy = res[0];
console.log(resmy)
// console.log(resmy.top)
});
wx.createSelectorQuery().select('#demo3').boundingClientRect().exec(function (res) {
var resmy = res[0];
console.log(resmy)
// console.log(resmy.top)
});
},
})3.3 代码说明
4.说明
4.1 wx.createSelectorQuery() 是异步的，使用时应该注意这个异步问题，如果对于从接口请求数据之后再渲染页面，页面渲染完毕再获取dom节点的问题，如果必要刻意加一个延时器；
4.2 对于页面需要用到的wx.createSelectorQuery的情况：最好使用class名字的方式，一次获取（selectAll）的方式，然后逐个赋值；而不是，通过id获取逐个赋值的方式（因为通过前者，你只有一个回调函数，后者有几个就有几个回调函数，一个回调函数，如果回调函数中需要有处理动作，只需要写一次就好了，所以比较推荐）。
4.3 官网传送门：点我进入官网