收藏
回答

小程序搜索框sug下拉列表错位问题

问题类型 微信版本 基础库版本
Bug 8.0.70 3.15.2

环境: 微信小程序,百度文库类搜索页,使用 wx:if/wx:else 控制「搜索历史」和「搜索建议」的显示。

现象:

1、初始输入内容时,suggestList(搜索建议)正常显示在列表中。

2、当清空输入框内容时,预期逻辑是 suggestList 消失、historyList(搜索历史)显示。

3、但实际表现为:suggestList 没有正常隐藏,反而错位渲染到了 historyList 的下方,两个列表同时存在,UI 重叠错乱。

4、代码中这两个列表是 wx:if="{{suggestList.length > 0}}"wx:else 的互斥关系,但出现了同时渲染的情况。

补充信息:

在iphone 16 pro 上复现,其他机型未复现

  • 清空输入框时,已通过 setDatasuggestList 设为空数组 [],但视图没有按预期更新。
  • 从截图看,sug 列表的 DOM 元素依然存在,只是跑到了 history 列表下方,两个列表同时渲染,不符合 if/else 互斥的逻辑。
  • 已排查 setData 调用时机,清空时已正确执行 this.setData({ suggestList: [] })

问题:为什么 wx:if/wx:else 控制的两个互斥列表,会出现 sug 列表未隐藏、跑到 history 列表下方的错位情况?该如何解决?

<view class="search-list">
  <!-- 搜索建议 sug -->
  <view wx:if="{{suggestList.length > 0}}">
    <view class="search-item" wx:for="{{suggestList}}" wx:key="index">
      <view class="search" bind:tap="toSearchResult" data-value="{{item.q}}">
        <view class="search-icon"></view>
        <highlight text="{{item.q}}" key="{{searchInputValue}}"></highlight>
      </view>
      <view class="sug-icon" bind:tap="setInputValue" data-value="{{item.q}}"></view>
    </view>
  </view>
  <!-- 搜索历史 history -->
  <view wx:else>
    <view class="history-item" wx:for="{{historyList}}" wx:key="index">
      <!-- 历史项内容 -->
    </view>
  </view>
</view>




回答关注问题邀请回答
收藏

2 个回答

  • Dec
    Dec
    04-14

    可以写一个小的代码片段测试一下

    04-14
    有用
    回复
  • hello world
    hello world
    04-13

    代码片段发一下,应该是你代码有问题

    04-13
    有用
    回复
登录 后发表内容