搜索历史展开关闭计算_小程序搜索历史展开收起-优快云博客

该代码段展示了如何在原生微信小程序中利用wx.createSelectorQueryAPI获取节点的高度和宽度。通过比较节点间的距离来判断是否需要展开搜索历史，如果最后一个节点的高度加上节点自身高度超过预设阈值，则显示“显示更多”按钮。此外，计算了“显示更多”按钮的左偏移量，即所有节点宽度之和加上间距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用的是原生微信小程序

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