color together中颜色扉页问题

图片.png

图片.png

实现这两个页面
要求：
当第一页内容块高度大于屏幕高度时，颜色扉页的高度=内容块高度。反之，
颜色扉页的高度=屏幕高度

动态获取内容块高度可以使用boundingClientRect这个方法。

但是发现这个方法在此处得到的高度并不准确。经过对比发现，差别的地方是在图片位置（封装了lazyload组件）。（每一张图片都是不一样高度的，因此不能获得固定的高度）
但是单独在组件中，使用该方法可以准确获取图片高度。

因此需要单独在组件中获得位置，然后传到页面。
boundingClientRect这个方法在组件中使用，需要添加in(this)。this指该组件

let query = wx.createSelectorQuery().in(this)
query.select('.img1').boundingClientRect(function (rect) { ...}).exec()

我们可以通过这样调用子组件方法，从而得到组件高度。

this.lazyimg = this.selectComponent('.lazyimg')
var height = this.lazyimg.getHeight()

注意这样的话，原方法的in(this)则不是指向组件了，所以需要先绑定组件，再执行方法。

理论上是可以的，但是返回的height居然是0。我百思不得其解。
后来发现是，由于组件设置当图片加载完毕才会出现，所以当我在页面的onready中获得高度时，图片并没有显示，所以为0。

所以只能把获得组件高度的逻辑放在图片加载出来之后，并且把高度triggle到页面。

这样做还是有点问题，当显示图片列表时，看到的每一张图片都会执行获得节点高度的逻辑，（但只有被点击的图片才需要高度）

因此如果可以识别到组件所在页面，是a页面才获得图片高度是最好的了。基于此，我给组件传进了不同的prop来识别不同的页面。

至此，解决问题。