网站录入,树莓派wordpress穿透,ps怎样做网站首页图,福州seo公司升级版1-清空全部的再次确认
实现功能： 历史搜索记录展示-历史搜索记录展示10条点击跳转-点击历史搜索记录可同步到搜索框并自动搜索全部删除-可一次性全部删除历史搜索记录全部删除-有再次确认操作展示
进行搜索后留下搜索记录 点击垃圾桶图标，显示【清空全部】
点击【清…升级版1-清空全部的再次确认
实现功能：
历史搜索记录展示-历史搜索记录展示10条点击跳转-点击历史搜索记录可同步到搜索框并自动搜索全部删除-可一次性全部删除历史搜索记录全部删除-有再次确认操作展示
进行搜索后留下搜索记录 点击垃圾桶图标，显示【清空全部】
点击【清空全部】后，历史记录被清空 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"搜索历史/viewview class="remove" wx:if="{{!showClearAllButton}}" bindtap="showClearAll"van-icon name="delete-o" size="21" //viewview class="clear-all" wx:if="{{showClearAllButton}}" bindtap="clearAllHistory"清空全部/view/view!-- 内容区域 --view class="content"!-- 循环显示搜索历
