小程序js通过判断DOM元素节点位置来自动显示“更多”按钮_vue判断元素溢出 后面出现更多按钮

Sham最近因为在做一个食堂订餐功能，因为订单中内容比较多，又不想初始状态全部展示，希望类似文字过长显示省略号那样，在最后显示一个“more”按钮。

实现方法和代码如下，记录备忘

JS部分

data: {
    showmorebtn:{}
  //这里初始化，用户后面往这个对象中添加对应id的判断用数据
  },
//主要用于循环并赋值
  checkheight(that){
    var that = this;
    var items = that.data.mealorders;
    //获取mealorder数据数组，循环执行是否超高并显示more按钮
    for(var i=0; i<items.length;i++){
      that.checkoverflow(that,i);
    }
  },
 
//超高时显示more按钮
  checkoverflow(that,id){
    var query = wx.createSelectorQuery();
    //创建节点查询器
    //获取父对象id的位置信息，生成后会是在res数组的第一个
    query.select('#f'+id).boundingClientRect();
    //获取子对象id的位置信息，res数组第二个数据
    query.select('#c'+id).boundingClientRect();
    //如果上面再继续加，则会依次为res数组的第三……个数据
    //生成位置信息数组
    query.exec(function(res) {
      //res就是 所有标签为对应id的元素的信息 的数组
      //console.log(res);
      //这里的showmorebtn在js的初始data里设置 showmorebtn :{}
      var showmorebtn = that.data.showmorebtn;
      if(res[1].height > res[0].height+10){
        //当子对象高度超过父对象高度时，表示内容太多了，需要显示more按钮，渲染数据用于前端判断
        showmorebtn[id] = true;
        that.setData({
          showmorebtn:showmorebtn
        })
      }
    })
  },

wxml部分

<!--这里的用index+1是因为发现直接用index的话，如果index为0时，会被判断为false-->
<view class="details {{showdetail == index+1 ? '' : 'h55'}}" id="f{{index}}">
    <view id="c{{index}}">
      <view class="foods" wx:for="{{item.orderdetail}}" wx:key="index" wx:for-item="foods">
        {{index}}:{{foods.number}}份
      </view>
    </view>
  </view>
  <view class="showdetail white" id="{{index+1}}" bindtap="showdetail" wx:if="{{showmorebtn[index]}}">
    <view class="bgblue center"><text>more</text></view>
  </view>

最后是WXSS部分，其他没什么，就一个h55，其他的样式不影响

 
.h55{
  height:55rpx;
  overflow: hidden;
  transition: all 0.4s ease-out 0s;
  -webkit-transition: all .4s ease-out;
  -moz-transition: all .4s ease-out;
}

一个在前往码农道路上走走停停的行政文员