uniapp 实现超过两行的搜索历史具有展开收起功能

实现思路

将搜索历史封装为一个组件，传入搜索历史数据。在组件的 mounted 钩子里计算判断搜索历史数据是否需要展开收起功能。

代码

获取历史项的 left 值，以第一个历史项为基准，当出现一个历史项的 left 值与第一个相同时，说明此时的行数应该加 1。

然后把搜索历史的占用行数、第 n（3）行的最后一个历史项的 index 记录在 data 里。

然后我们就根据占用行数、最后一个历史项的索引来实现搜索历史的展开和收起功能。

<!-- 搜索历史组件 -->
<search-history :search-history="searchHistory" />

<!-- 搜索历史组件的mounted钩子 -->
mounted() {

    uni.createSelectorQuery().in(this).selectAll('.search-history-item').boundingClientRect(data=>{
      let firstItemLeft = 0
      if(data.length > 0) {
        firstItemLeft = data[0].left
      }
      for(let i = 0; i < data.length; i++) {
        let item = data[i]
        if(item.left === firstItemLeft) {
          this.lineNum ++
          if(this.lineNum >= 3) {
            this.lastIndex = i - 1
            break
          }
        }
      }
    }).exec()

}

提示

使用 v-if 让组件重新渲染时，会重新触发 mounted 钩子，利用这里点我们可以计算变动的搜索历史数据。当搜索时，我们先让搜索历史组件消失，搜索出结果并往搜索历史里新增一条数据后，我们再重新渲染搜索历史组件，根据行的搜索历史数据算出占用行数、最后历史项的索引。