[移动开发]微信小程序 历史搜索记录折叠 动态计算

微信小程序 历史搜索记录折叠

1. 需求需要根据历史记录数据判断 是否显示向下箭头，如果数据超过两行需要显示按钮。
2. 按钮会一直跟第二排按钮的最后

核心代码 查找出历史记录item的节点 利用wx.createSelectorQuery() 组件中wx 需要改成this
API 文档连接

isshowDow(){
      let idx = 0
      let count = 0
      // 历史记录 页面超出两行截取数据
      const query = this.createSelectorQuery()
      query.selectAll('.history-item').boundingClientRect()
      query.exec((res)=>{
        console.log(res[0])
        res[0].forEach((item,index)=>{
          console.log(item.left)
          // 如果item 的left 为14 距离那么他就是X排的第一个，可以根据这个判断是否需要折叠
          if(item.left === 14){
            count++
            if(count === 3){
                idx = index-1
                console.log('超过了2行了')
            }
            
          }
        })
        // 超过2行截断数据
        if (idx > 0) {
          this.data.historyList = this.data.historyList.slice(0, idx)
          this.setData({
            historyList:this.data.historyList,
            isOpen:true,
            foldhistoryList:this.data.historyList,
            isfold:true
          })
        } else {
          this.setData({
            historyList:this.data.historyList,
            isOpen:false,
            isfold:false
          })
        }
      })
    },