搜索历史展开关闭计算

使用的是原生微信小程序

API： wx.createSelectorQuery()

源代码：

var query = wx.createSelectorQuery();
query.selectAll('#id').boundingClientRect()
query.exec(function (res) {
           
              for (let index = 0; index < res[0].length; index++) {
                long = res[0][index].width +long
                num = index+1
                //循环获取每一个节点距离顶部的距离
                if (index == res[0].length-1) {
                  endTop = res[0][index].top
                }
                if (index == 0) {
                  firstTop = res[0][index].top
                }
                //计算每一个节点减去第一个节点的值加上节点本身是否大于70（70是搜索历史收缩起来的高度）
                if (res[0][index].top-firstTop>0&&res[0][index].top-firstTop+25<70) {
                  //宽度数组及个数
                  widthList[widthListIndex] = res[0][index].width+24
                  widthListIndex = widthListIndex+1

                }
              setTimeout(() => {
                //计算显示更多箭头距离左边的距离
                if (widthList!=[]) {
                  for (let index = 0; index < widthList.length; index++) {
                    leftHow = leftHow + widthList[index]-12
                    that.setData({
                      marLift:leftHow
                     })
                  }
                }
               setTimeout(() => {
                 //判断是否需要显示更多箭头
                if(endTop-firstTop+25>70){
                  that.setData({
                    isMove :true
                  })
                }else{
                  that.setData({
                    isMove:false
                  })
                }
               }, 100);
              }, 100);
            }
            
          })

就是使用wx.createSelectorQuery()获取节点的高度以及宽度。

高度的主要用处是判断是否需要展开显示更多，具体流程就是：

1、获取每一个节点距离顶部的距离

2、计算每一个节点距离顶部的距离比第一个节点距离顶部的距离大多少，如果最后一个节点加上节点自身的高度减去第一个节点距离顶部的高度大于搜索历史区域（不展开）设置的高度，则需要展开。

3、如果需要展开，就需要展示显示更多按钮，显示更多按钮距离左边的的距离就是，每个节点的宽度之和加上间距之和加上按钮距离最后一个的节点的距离。