希望在小程序页面上实现一个轻量级就地提示信息的效果。有如下思路：
- 使用模式对话框
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等效果读者自己调试调试就懂了。
