uniapp 气泡菜单根据按钮所处屏幕坐标位置动态自适应显示

之前写公司的app的一个项目因为要实现一套代码在ios和安卓上面都能运行所以选择了uniapp。
有一个需求就是点击按钮显示一个气泡菜单的效果，在气泡菜单组件选择方面我们直接采用了插件市场里的春雷气泡菜单（https://ext.dcloud.net.cn/plugin?id=801#detail）

我们按要求引入春雷气泡菜单组件，通过X,Y动态传入气泡菜单的距离屏幕左边距跟上边距的距离

<view class="content">
    <chunLei-popups v-model="popupStatus" :maskBg="'rgba(0,0,0,0.5)'" :popData="judgepop" @tapPopup="tapPopup" :y="styleObject.top" :x="styleObject.left" :gap="28" :triangle="false" placement="top-end">
    </chunLei-popups>
</view>

return 气泡菜单的初始坐标值

styleObject: {
    left: 0,
    top: 0,
}

我们在使用过程中实现了大概的效果，如下图

image.png

但是在我们接下来的使用调试中发现一个问题，那就是当我们使用手机滑动屏幕使点击按钮处在距离屏幕顶部一定的灵界点距离的时候会出现气泡菜单展示不全的问题，

如下图

下面的内容被挡住了

这个时候我们就知道需要动态获取按钮所处的屏幕位置，通过查阅uniapp文档我们知道了获取元素节点的方法uni.createSelectorQuery()

截图所示

我们看下优化前的代码

                /* uniapp不识别document获取节点，改用下面那种*/
                const query = uni.createSelectorQuery().in(this);
                query.selectAll('.itemCircle').boundingClientRect(data => {
                    const ref = data[index]
                    const height = uni.getSystemInfoSync().screenHeight//屏幕高度
                    this.styleObject.left = ref.left - ref.width
                    this.styleObject.top = ref.top - ref.height
                    const boxHeight = 212 + this.styleObject.top//模态框高度+距离顶部高度
                    // if(boxHeight > height) {
                    //  this.styleObject.top = ref.top - 212
                    // }
                    console.log(this.styleObject.top,boxHeight,height)
                    this.popupStatus = true
                }).exec();

然后我们把注释掉的代码放开就可以得到我们想要的效果了

大功告成