希望在小程序頁面上實(shí)現(xiàn)一個(gè)輕量級(jí)就地提示信息的效果。有如下思路：

• 使用模式對(duì)話框showModal。這個(gè)有點(diǎn)突然，而且?guī)缀醪荒芏ㄖ茦邮剑?/li>
• 自己寫對(duì)話框。有點(diǎn)重，無論是中間跳框，還是下方彈出，都得自己寫個(gè)蒙板，設(shè)定各種層次等等，需要控制好整個(gè)頁面，不然容易產(chǎn)生不可預(yù)料的效果；
• 用showActionSheet代替。有點(diǎn)騙人。
  最后找了個(gè)微信小程序自定義氣泡組件，這個(gè)確實(shí)不錯(cuò)，但是出現(xiàn)的位置比較呆板，而且如果頁面能滑動(dòng)，就亂了，于是進(jìn)行改進(jìn)。

想實(shí)現(xiàn)的效果

以一個(gè)組件view為例，默認(rèn)在組件的上方就地出現(xiàn)一個(gè)提示氣泡。

image.png

獲得scrollTop

這個(gè)必須要有，確保組件滾動(dòng)后，計(jì)算出來的豎直方向偏移py是對(duì)的。

  onTap: function (e) {
    // 獲取按鈕元素的坐標(biāo)信息
    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函數(shù)

首先參數(shù)多了個(gè)

onDisplay: function(e, scrollTop) 

提前獲得氣泡高度，這是個(gè)坑，默認(rèn)高度是120，但我覺得應(yīng)該由氣泡個(gè)數(shù)來計(jì)算，不然會(huì)導(dǎo)致第一次氣泡冒的位置不對(duì)。

ph = self.getItemsHeight();

在else里對(duì)px, py重新計(jì)算：

        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('氣泡寬，以組件的左邊距l(xiāng)eft為準(zhǔn)，px: ' + px);
        }
        //距離左右至少空4個(gè)像素
        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等效果讀者自己調(diào)試調(diào)試就懂了。