微信小程序中獲取dom信息

1、需求：要求點擊列表右側彈出一個操作彈框，不同行展示的位置不同

2、思路：設置彈窗position: fixed;，點擊的時候獲取點擊元素的dom信息來設置彈窗的位置

3、實現：

3-1、給點擊的元素設置id，並設置data-id用於點擊的時候獲取id

      <view class="dot_box">
        <van-icon name="ellipsis" class="dot_item" id="dot-{{index}}" data-id="dot-{{index}}" bindtap="showCard" />
      </view>

3-2、點擊的時候根據id獲取點擊的dom節點位置信息去設置彈窗位置

注意：在自定義組件或包含自定義組件的頁面中，應使用 this.createSelectorQuery() 來代替

  showCard(e) {
    this.setData({
      isShow: false
    })
    let _this=this
    wx.createSelectorQuery().select('#' + e.target.dataset.id).boundingClientRect(function (res) {
      _this.setData({
        dotTop:res.top+30,
        isShow: true
      })
    }).exec()
  },

3-3、彈窗的html

    <view wx:if="{{isShow}}" class="card-class" style="top:{{dotTop}}px;">
      <navigator class="marginB60" url="/pages/admin/cancellPerson/person">注銷1</navigator>
      <navigator url="/pages/admin/cancellPerson/card">注銷2</navigator>
    </view>

4、效果