小程序中计算剩余页面高度

小程序中计算剩余页面高度

​ 在小程序中当我们使用scroll-view组件时需要给设定一个高度，适配屏幕剩余高度，由于没有手机的屏幕尺寸不一样无法给出固定值，这个时候就需要使用到动态计算页面剩余高度。在uniapp中提供了 uni.createSelectQuery() 方法。

一、uni.createSelectQuery()

​ 返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息。在微信小程序中也有，wx.createSelectQuery()方法，作用一样。

注意：

​ 1.使用uni.createSelectorQuery() 需要在声明周期mounted后进行调用。

​ 2.自定义组件编译模式（默认模式），需要使用到 selectorQuery.in 方法。

二、SelectorQuery 查询节点信息的对象

1. selectorQuery.in(component)

   将选择器的选取范围更改为自定义组件 component 内，返回一个 SelectorQuery 对象实例。（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）。

   const query = uni.createSelectorQuery().in(this);
   query.select('#id').boundingClientRect(data => {
     console.log("得到布局位置信息" + JSON.stringify(data));
     console.log("节点离页面顶部的距离为" + data.top);
   }).exec();
   

2. selectorQuery.select(selector)

   在当前页面下选择第一个匹配选择器 selector 的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。

   selector类似于css的选择器，但仅支持下列语法

   ID、类选择器、子代、后代、多选择器并集、跨自定义组件的后代选择器 .the-ancestor >>> .the-descendant

3. selectorQuery.selectAll(selector)，获取匹配到的所以节点

4. selectorQuery.selectViewport()，选择显示区域，可用于获取显示区域的尺寸、滚动位置等信息。

5. selectorQuery.exec(callback)，执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回

三、NodesRef 用于获取节点信息的对象

1. nodesRef.fields(object,callback)

   获取节点的相关信息。第一个参数是节点相关信息配置（必选）；第二参数是方法的回调函数，参数是指定的相关节点信息。

2. nodesRef.boundingClientRect(callback)

   添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。

3. nodesRef.scrollOffset(callback)

   添加节点的滚动位置查询请求。以像素为单位。节点必须是 scroll-view 或者 viewport。返回 NodesRef 对应的 SelectorQuery。

4. nodesRef.context(callback)

   添加节点的 Context 对象查询请求。支持 VideoContext、CanvasContext、和 MapContext 等的获取。

5. nodesRef.node(callback)

   获取 Node 节点实例。目前支持 Canvas 的获取。

四、注意nvue 暂不支持uni.createSelectorQuery

​ 使用const dom = weex.requireModule('dom'),获取dom。官方文档

const dom = weex.requireModule('dom')；
const result = dom.getComponentRect(this.$refs.box, option => {
        console.log('getComponentRect:', option)
        // option.size返回节点的位置信息
        this.size = option.size
 })
// 还有dom.scrollToElement(ref,options)方法，让页面滚动到一定位置方法；

五、具体实例

setHeihgt: function() {
	var that = this;
	var windowHeight = uni.getSystemInfoSync().windowHeight;
	var windowWidth = uni.getSystemInfoSync().windowWidth;
			
	const query = uni.createSelectorQuery().in(this);
    // .nav导航栏盒子
	query.select('#nav').boundingClientRect(data => {
        // scroll-view组件高度scrollHeight
		that.scrollHeight = parseInt(((windowHeight - data.height + 1) * (750 / windowWidth)));
	}).exec();
}