微信小程序中获取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、效果