Page.js

data: {
    keywordsList: [],
    unfoldBtnFlag: false, // 搜索历史中展开按钮开关
    isunfoldList: false // 展开全部历史搜索
  },
onShow() {
    const _this = this;
    // 获取缓存中的搜索历史
    wx.getStorage({
      key: 'keywordsList',
      success(res) {
        _this.setData({ keywordsList: res.data })
      }
    })
    
    setTimeout(() => {
      // 获取keywordsList遍历后子元素节点在页面上的宽高
      const query = wx.createSelectorQuery().in(this)
      query.selectAll('.searchList-item').fields({
        size: true,
      }, function (res) {
        _this.computedItemSize(res)
      }).exec()
    }, 500)
},
// 搜索历史子元素个数计算
  async computedItemSize(res) {
    const keywordsList = this.data.keywordsList;
    if (keywordsList.length == 0) return;
    const listWidth = wx.getSystemInfoSync().windowWidth - 20; // 20 为左右pardding
    const listItemMarginRight = 10;
    const itemObj = {}; // { arrLength : arr }
    let itemArr = []; // 每行子元素集合
    let count = 0; // 当前长度
    for(let i=0; i<res.length; i++) {
      const listItemWidth = res[i].width + listItemMarginRight;
      let num = count + listItemWidth;
      if (num < listWidth) {
        itemArr.push(keywordsList[i])
        count += res[i].width + listItemMarginRight
      } else {
        if (itemArr.length ==0 && count == 0) { // 此条件满足，说明子元素长度超出
          itemObj[Object.keys(itemObj).length] = [keywordsList[i]]
        } else {
          itemObj[Object.keys(itemObj).length] = itemArr
          count = 0
          itemArr = []
          i-- // 当前元素宽度+总长度超出，重置集合后，重新遍历
        }
      }
    }
    if (itemArr.length > 0) { itemObj[Object.keys(itemObj).length] = itemArr }

    let newKeywordsList = [] // 最终结果
    const itemObjKeyArr = Object.values(itemObj);
    let maxWidthIndex = 0; // 第二行的到最大宽度子元素的索引
    if (itemObjKeyArr.length > 2) { // 超过2行
      this.setData({unfoldBtnFlag: true}) // 行数大于2显示展开按钮
      if(itemObjKeyArr[1].length > 1) { // 若第二行的子元素有多个，否则表示子元素长度超出，css处理即可
        const listSecWidth = listWidth - 26 // 26为展开按钮的宽度
        let maxWidth = 0;
        itemObj[1].forEach((item, index) => {
          maxWidth += res[itemObjKeyArr[0].length + index].width + listItemMarginRight
          if (maxWidth < listSecWidth) { maxWidthIndex = index }
        });
        itemObj[1] = itemObj[1].slice(0 , maxWidthIndex + 1) // 截取最大宽度内的子元素集合
      }
      newKeywordsList = [...itemObj[0], ...itemObj[1]]
    } else {
      itemObjKeyArr.forEach(item => newKeywordsList = [...newKeywordsList, ...item])
    }
    this.setData({keywordsList: newKeywordsList}) // 替换搜索历史数据
  },
// 展开搜索历史记录
  unfoldList() {
    const _this = this;
    wx.getStorage({
      key: 'keywordsList',
      success(res) {
        _this.setData({ 
          keywordsList: res.data,
          isunfoldList: true,
          unfoldBtnFlag: false
        })
      }
    })
  },
  // 删除全部搜索历史记录
  clearKeywordsList() {
    const _this = this;
    wx.showModal({
      content: '是否删除全部历史搜索?',
      cancelText: "取消",
      confirmText: "删除",
      confirmColor: '#4C88FF',
      success(res) {
        wx.removeStorageSync('keywordsList') // 清除缓存中的记录
        _this.setData({
          keywordsList: [],
          unfoldBtnFlag: false
        })
        wx.showToast({
          title: '删除成功',
          icon: 'success'
        })
      }
    })
  }

Page.wxml

<view wx:if="{{ keywordsList.length > 0 }}" class="searchList">
  <view class="searchList-title">
    <text class="searchList-text">搜索历史</text>
    <text class="iconfont icon-close" bind:tap="clearKeywordsList"></text>
  </view>
  <view class="searchList-content {{ unfoldBtnFlag && !isunfoldList ? 'searchList-content-unfold' : ''}}">
    <block wx:for="{{ keywordsList }}" wx:key="{{ index }}">
      <view class="searchList-item" bind:tap="getValue" data-value="{{ item }}">{{ item }}</view>
    </block>
    <text wx:if="{{unfoldBtnFlag}}" class="searchList-icon iconfont icon-top" bind:tap="unfoldList"></text>
  </view>
</view>

Page.wxss

.searchList {
    padding: 10px;
    background-color: #fff;
    margin-top: 108rpx;
}
.searchList-title {
    display: flex;
    justify-content: space-between;
   align-items: center;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20rpx;
}
.searchList-item  {
    box-sizing: border-box;
    max-width: 100%;
    font-size: 12px;
    padding: 10rpx 20rpx;
    color: #ccc;
    background-color: #f8f8f8;
    border-radius: 25px;
    margin-right: 10px;
    margin-bottom: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.searchList-content-unfold view:nth-last-of-type(1) {
  max-width: calc(100% - 36px); // 26为展开按钮宽度 10为margin-right
}
.searchList-icon {
  width: 26px;
  height: 26px;
  line-height: 24px;
  text-align: center;
  color: #ccc;
  background-color: #f8f8f8;
  border-radius: 50%;
}
.icon-close {
  font-size: 14px;
  font-weight: normal;
}