小程序 - 搜索历史折叠功能

主要思路：

const query = wx.createSelectorQuery().in(this);  方法获取dom的宽度 来计算

通过使用一个 对比的dom让他 绝对定位于 页面之外 作为是否需要折叠的参照物。

首先 默认为折叠状态，参照物 减去 需要显示的高度 是否大于 一个范围值 。大于 则 需要折叠；小于 则 不需要折叠 且 不需要折叠按钮

 

html

<view class="box">
<view class=" showArea {{onFold ? 'search-history-wrapper' : 'search-history-wrapper-on-fold'}}">
    <view class="search-history-item" wx:for="{{ onFold ? list : onFoldList}}" wx:key="index">
        {{item}}
    </view>
    <view class="{{onFold ? 'fold' : 'off-fold'}}" wx:if="{{foldIconVisible}}" bindtap="fold"></view>
</view>
<!-- 用于对比的 -->
<view class="search-history-wrapper hideArea">
    <view class="search-history-item_hidden" wx:for="{{originList}}" wx:key="index">
        {{item}}
    </view>
</view>
</view>

 

css

.search-history-wrapper,.search-history-wrapper-on-fold{
  /* border: 1px solid red; */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 32rpx;
  box-sizing: border-box;
}
.fold,.off-fold{
  width: 88rpx;
  height: 58rpx;
  background-color: blue;
}
.off-fold{
  background-color: red;
}
.search-history-item,.search-history-item_hidden{
  padding: 12rpx 20rpx;
  box-sizing: border-box;
  background-color: #f0f2f4;
  border-radius: 8px;
  font-size: 24rpx;
  color: #4f5356;
  font-weight: 400;
  margin: 0 12rpx 12rpx 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  max-width: 236rpx;
}
.showArea{
  height: 58rpx;
  overflow: hidden;
}
.search-history-wrapper-on-fold{
  height: 126rpx;
}
.hideArea{
  position: fixed;
  top: -100px;
}

 

JS

const app = getApp()

Page({
  data: {
    originList: ["连衣裙", "篮球鞋", "卡酷其", "阿迪王","Nike","衬衣", "Polo", "Benzene", "梅德索拉"], //请求回来的数据
    list: [], //已折叠的数据
    onFoldList: [], // 未折叠的数据
    onFold: true, //用于判断 向上 向下折叠图标
    foldIconVisible:true //折叠图标是否显示
  },
  onLoad() {
    this.checkFold()
  },

  async checkFold() {
    const {
      originList
    } = this.data

    const query = wx.createSelectorQuery().in(this);
    // 计算dom宽度
    await query
      .selectAll('.showArea,.hideArea,.search-history-item_hidden')
      .boundingClientRect((res) => {
        const maxWidth = res[0].width -32; //容器最大宽度 减去 32 是因为有左右padding
        const offFold = [...originList]; // 用于存放 已折叠 数据
        const onFold = [...originList] // 用于存放 未折叠 数据
        // 已折叠
        let offFoldWidth = 0; //统计 一行最大宽度
        let offSpliceIndex = 0; //统计出 需要 分割的 最后一个元素的下标
        // 未折叠
        let onFoldWidth = 0;
        let onSpliceIndex = 0
        // 判断是否是换行了
        if (res[1].height - res[0].height > 10) {
          // 算出 已折叠 时 第一行的数据个数 加上 折叠按钮
          for (let i = 2; i < res.length; i++) {
            // 每个元素 加 6的原因是margin-left:6
            offFoldWidth += res[i].width + 6
            // 50原因是 折叠按钮 width: 44 + margin-left: 6
            if (maxWidth - offFoldWidth > 50) {
              offSpliceIndex = i - 1
            }
          }
          const offFoldList = offFold.splice(0, offSpliceIndex)

           // 算出 未折叠 时 第一行的数据个数 加上 折叠按钮
          for (let i = 2; i < res.length; i++) {
            onFoldWidth += res[i].width + 6;
            if ((maxWidth*2) - onFoldWidth > 50) {
              onSpliceIndex = i - 2
            }
          }
          const onFoldList = onFold.splice(0, onSpliceIndex)
          console.error("onFoldList",onFoldList)
          this.setData({
            list: offFoldList,
            onFoldList
          })
        } else {
          this.setData({
            foldIconVisible:false,
            list: originList,
          })
        }
      })
      .exec();
  },
  fold() {
    const {
      onFold,
    } = this.data
    this.setData({
      onFold: !onFold
    })
  }
})