color together中颜色扉页问题

图片.png
图片.png

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

背景：图片区块封装了一个加载动画组件（所以在图片没有加载完的时候，图片区域的高度是不准确的）

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

经历的问题：
这个方法在此处得到的高度并不准确。经过对比发现，差别的地方是在图片位置。代码获取的高度会比实际视觉高度高出一些。

---

2020.3.27分割线

发现问题原因：image设置display: inline-block;，导致image标签外包标签<image-wrapper>比实际image高了几个px（这是由于图片标签默认了display: inline）

所以解决方法就又可以是：
把image设置display: block;。考虑到图片没有加载完毕的问题，所以在小程序onshow钩子中调用就可以解决问题了。

总结：display: block的特点
① 可以设置width，height，margin，padding各个方向。（没有内容时）不设置width默认为浏览器宽度，height默认为0。（有内容时）根据内容物规定
② 即使设置了宽度，还是会独占一行

总结：display: inline的特点
① 不会独占一行。宽度根据内容决定。
② 不能设置width，height。水平方向的padding、margin有用，但是垂直方向只在特定条件下padding有用。
③ 行内元素都有一点间距
④ 对行内元素设置float，该元素会被赋值block，并且拥有浮动特性。行内元素之间的空白也消失了
⑤ 使用position定位的时候，absolute与fixed.都会使得原先的行内元素变为块级元素
⑥ 当行内元素有内容，并且设置了padding水平方向，那么设置padding垂直方向就是有用的

总结：display: inline-block的特点
① 不会独占一行
② 可以设置width，height
③ 当inline-block碰到同类（inline，inline-block)时，谁的上下margin、padding或line-height大，就听谁的。除非它是inline，因为inline的margin是不起作用的。且inline的padding是不占空间的。
④ inline和inline-block会引起间距的空格

空隙解决办法：
① 两个元素代码放在同一行
② 两个节点之间加注释节点
③ 设置父元素font-size: 0

<div class="item1">item1</div><div class="item2">item2</div>

特别的：当block元素包住inline-block/inline的图片标签的时候，block元素会被撑开多3-4px左右

当时并没有发现是inline-block的问题。所以就使用了下面的第二种方法。

---

2020.3.03分割线

在图片加载好的钩子内，对组件中<image>标签调用boundingClientRect方法，然后triggle到父页面。

这里有一个注意点：
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()

当在图片列表页面是不需要计算高度的，只有在详细图片页面才需要。所以在子组件中设置prop。判断组件所在页面。在特定页面才会触发高度计算。

至此，解决问题。