环境: 微信小程序,百度文库类搜索页,使用 wx:if/wx:else 控制「搜索历史」和「搜索建议」的显示。
现象:
1、初始输入内容时,suggestList(搜索建议)正常显示在列表中。
2、当清空输入框内容时,预期逻辑是 suggestList 消失、historyList(搜索历史)显示。
3、但实际表现为:suggestList 没有正常隐藏,反而错位渲染到了 historyList 的下方,两个列表同时存在,UI 重叠错乱。
4、代码中这两个列表是 wx:if="{{suggestList.length > 0}}" 和 wx:else 的互斥关系,但出现了同时渲染的情况。
补充信息:
在iphone 16 pro 上复现,其他机型未复现
- 清空输入框时,已通过
setData将suggestList设为空数组[],但视图没有按预期更新。 - 从截图看,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>

可以写一个小的代码片段测试一下
代码片段发一下,应该是你代码有问题