【微信小程序】4plus|搜索框-历史搜索 | 我的咖啡店-综合实训

升级版1-清空全部的再次确认

实现功能：

1. 历史搜索记录
2. 展示-历史搜索记录展示10条
3. 点击跳转-点击历史搜索记录可同步到搜索框并自动搜索
4. 全部删除-可一次性全部删除历史搜索记录
5. 全部删除-有再次确认操作

展示

进行搜索后留下搜索记录

点击垃圾桶图标，显示【清空全部】

点击【清空全部】后，历史记录被清空

1. 页面初始数据设置

在 search.js 中，我们定义了页面的初始数据，包括搜索历史列表 historyList、搜索关键词 keyword 以及控制清空按钮显示的 showClearAllButton。

// pages/search/search.js
Page({
  data: {
    historyList: [],
    keyword: "",
    showClearAllButton: false
  },
  // ...其他函数...
});

2. 显示清空全部按钮

个函数通过修改 showClearAllButton 的值来控制“清空全部”按钮的显示和隐藏。

  // 显示清空全部按钮
  showClearAll() {
    this.setData({
      showClearAllButton: true
    });
  },

• this.setData 是微信小程序中用于更新页面数据的方法。当 setData 被调用时，它不仅会更新页面的数据，还会触发页面的重新渲染，以反映新的数据状态。
• showClearAllButton 是页面数据（data）中的一个属性，用于控制“清空全部”按钮的显示。当其值为 true 时，按钮显示；为 false 时，按钮隐藏。

3. 清空搜索历史

在 clearAllHistory 函数中，我们使用 wx.showModal 来显示一个确认对话框，确保用户真的想要清空搜索历史。

// pages/search/search.js
clearAllHistory() {
  wx.showModal({
    title: '清空历史',
    content: '确定要清空所有搜索历史吗？',
    success: (res) => {
      if (res.confirm) {
        this.setData({
          historyList: [],
          showClearAllButton: false
        });
        wx.removeStorageSync('searchKeyArr');
      }
    }
  });
},

4. WXML 结构

在 search.wxml 中，我们使用条件渲染来控制清空按钮的显示和隐藏。

<!--pages/search/search.wxml-->
<view class="search">
  <!-- 搜索框开始 -->
  <van-search ...>
    <view slot="action" bind:tap="onSearch" style="padding:0 30rpx">搜索</view>
  </van-search>
  <!-- 搜索框结束 -->
  <!-- 搜索历史视图开始 -->
  <view class="history" wx:if="{
  {historyList.length}}">
    <!-- 标题 -->
    <view class="title">
      <view class="text">搜索历史</view>
      <view class="remove" wx:if="{
  {!showClearAllButton}}" bindtap="showClearAll">
        <van-icon name="delete-o" size="21" />
      </view>
      <view class="clear-all" wx:if="{
  {showClearAllButton}}" bindtap="clearAllHistory">
        清空全部
      </view>
    </view>
    <!-- 内容区域 -->
    <view class="content">
      <!-- 循环显示搜索历