微信小程序-超过一定高度，进行动作

需求

历史搜索界面上超出两行，不存储，不显示

小程序怎么获取元素高度？小程序都没Document对象，怎样操作DOM? 

一开始我就是这样想的，臣妾办不到!

然而现实又啪啪啪的打脸了~ 没有Document对象，小程序人家还是可以获取元素的基本信息的，人家有方法啊!

就是它 wx.createSelectorQuery

 

需求实现

wxml中: 为目标元素绑定一个id

<view class="panel_body" id="rwPanel">
  <view wx:for="{{recentSearch}}" wx:key="{{index}}" class="panel_body_item" >
    {{item}}
  </view>
</view>

 js的函数中：根据id获取元素

// 处理超出的函数
over: function () {
    var that = this;
    var recentSearch = wx.getStorageSync('recentSearch');
    // 设置界面的最近搜索
    this.setData({ recentSearch: recentSearch }, () => {
      // 当setData执行完成后，元素rwPanel被渲染在了界面上后，再去获取元素rwPanel的高度
      var query = wx.createSelectorQuery();
      query.select('#rwPanel').boundingClientRect();
      query.exec(res => {
        if (res[0]) {
          // 元素的高度res[0].height
          if (res[0].height > (160 / app.globalData.px_rpx)) {
            console.log('超出两行', recentSearch)
            // 删除最近搜索数组中的最后一位
            recentSearch.splice(recentSearch.length - 1, 1);
            // 这里使用同步更新缓存，是为了接下来在再次调用本函数时，缓存已更新
            wx.setStorageSync('recentSearch', recentSearch)
            that.setData({ recentSearch: recentSearch },()=>{
              // 再次执行该函数，检查是否还有超出的元素，直到清理完为止
              that.over();
            })
          }
        }
      })
    })
},