微信小程序就地气泡效果（改进自popover）

希望在小程序页面上实现一个轻量级就地提示信息的效果。有如下思路：

• 使用模式对话框showModal。这个有点突然，而且几乎不能定制样式；
• 自己写对话框。有点重，无论是中间跳框，还是下方弹出，都得自己写个蒙板，设定各种层次等等，需要控制好整个页面，不然容易产生不可预料的效果；
• 用showActionSheet代替。有点骗人。
  最后找了个微信小程序自定义气泡组件，这个确实不错，但是出现的位置比较呆板，而且如果页面能滑动，就乱了，于是进行改进。

想实现的效果

以一个组件view为例，默认在组件的上方就地出现一个提示气泡。

image.png
如果上面空间不够了，气泡就在下面出现。
其余跟原生的效果一致。

获得scrollTop

这个必须要有，确保组件滚动后，计算出来的竖直方向偏移py是对的。

  onTap: function (e) {
    // 获取按钮元素的坐标信息
    var id = e.currentTarget.id;
    let scrollTop = 0;
    wx.createSelectorQuery().selectViewport().scrollOffset(function (res) {
      scrollTop = res.scrollTop;
    }).exec()
    wx.createSelectorQuery().select('#' + id).boundingClientRect(res => {
      this.popover.onDisplay(res, scrollTop);
    }).exec();
  },

更改onDisplay函数

首先参数多了个

onDisplay: function(e, scrollTop) 

提前获得气泡高度，这是个坑，默认高度是120，但我觉得应该由气泡个数来计算，不然会导致第一次气泡冒的位置不对。

ph = self.getItemsHeight();

在else里对px, py重新计算：

        if (e.width >= pw) {
          px = e.left + (e.width - pw) / 2;
          console.log('组件比较宽，从组件中间冒出气泡，px: ' + px);
        } else {
          px = (windowWidth - pw) * e.left / (windowWidth - e.width);
          console.log('气泡宽，以组件的左边距left为准，px: ' + px);
        }
        //距离左右至少空4个像素
        if (px < 4) {
          px = 4
        }
        if (px > windowWidth - pw - 4 ) {
          px = windowWidth - pw - 4
        }

        if (e.top < ph + trangleHeight + 4) {
          vertical = 'bottom';
          py = e.bottom + trangleHeight + scrollTop;
          console.log('上面空间不够，py: ' + py);
        } else {
          vertical = 'top';
          py = e.top - ph - trangleHeight + scrollTop;
          console.log('上面空间挺大，py: ' + py);
        }

最终气泡就能就地冒出来。其它css等效果读者自己调试调试就懂了。