uni-app之旅-day03-搜索-5.3 搜索历史

时间：2024-10-09 07:58:33

5.3.1 渲染搜索历史记录的基本结构

  • ????????????在 data 中定义搜索历史的初始数据
historyList:['a','app','apple']
  • 渲染搜索历史区域的 UI 结构
<!-- 搜索建议列表 -->
<view></view>
<!-- 历史记录 -->
		<view class="history-box" v-else>
			<!-- 标题区域 -->
			<view class="history-title">
				<text>搜索历史</text>
				<uni-icons type="trash" size="17"></uni-icons>
			</view>
			<!-- 列表区域 -->
			<view class="history-list">
				<uni-tag :text="item" v-for="(item,i) in historyList" :key="i"></uni-tag>
			</view>
		</view>
  • ????????????搜索历史区域的样式
.history-box {
  padding: 0 5px;

  .history-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    font-size: 13px;
    border-bottom: 1px solid #efefef;
  }

  .history-list {
    display: flex;
    flex-wrap: wrap;

    .uni-tag {
      margin-top: 5px;
      margin-right: 5px;
    }
  }
}

5.3.2 实现搜索建议和搜索历史的按需展示

  • ????????????根据搜索结果列表的长度不为 0的时候（searchResults.length !== 0），需要展示搜索建议区域，隐藏搜索历史区域
  • 当搜索结果列表的长度等于 0的时候（searchResults.length === 0），需要隐藏搜索建议区域，展示搜索历史区域
  • 使用 v-if 和 v-else 控制这两个区域的显示和隐藏
<!-- 搜索建议列表 -->
<view class="sugg-list" v-if="searchResults.length !== 0">
  <!-- 省略其它代码... -->
</view>

<!-- 搜索历史 -->
<view class="history-box" v-else>
  <!-- 省略其它代码... -->
</view>

5.3.3 将搜索关键词存入 historyList

methods:{
	async getSearchList(){
		 //省略其它代码... 
		this.saveSearchHistory() 
	},
	saveSearchHistory(){
		this.historyList.push(this.kw) 
	}
},

5.3.4 解决关键字前后顺序的问题

  • ????????????定义一个计算属性 historys，将 historyList 数组 reverse 反转之后，就是此计算属性的值
computed:{
	historys(){
		return [...this.historyList].reverse() 
	}
}
  • 页面中渲染搜索关键词的时候，不再使用 data 中的 historyList，而是使用计算属性 historys
<uni-tag :text="item" v-for="(item,i) in historyList" :key="i"></uni-tag>

5.3.5 解决关键词重复的问题和将搜索历史记录持久化存储到本地

saveSearchHistory(){
	// this.historyList.push(this.kw)
	// 借助Set数据结构去重 转换为Set
	const set = new Set(this.historyList)
	set.delete(this.kw)
	set.add(this.kw)
	this.historyList = Array.from(set)
	//调用uni提供的setStorageSync(key,val) 将搜索历史记录持久化存储到本地
	uni.setStorageSync('kw',JSON.stringify(this.historyList))
}
  • 在 onLoad 生命周期函数中，加载本地存储的搜索历史记录
onLoad(){
	this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')
}

5.3.7 清空搜索历史记录

  • ????????????为清空的图标按钮绑定 click 事件
<text>搜索历史</text>
				<uni-icons type="trash" size="17" @click="cleanHistory"></uni-icons>
  • 在 methods 中定义 cleanHistory 处理函数
//清空搜索记录
cleanHistory(){
	this.historyList = [];
	uni.setStorageSync('kw','[]')
}

5.3.8 点击搜索历史跳转到商品列表页面

  • ????????????为搜索历史的 Item 项绑定 click 事件处理函数
<!-- 列表区域 -->
			<view class="history-list">
				<uni-tag :text="item" v-for="(item,i) in historys" :key="i" @click="gotoGoodsList(item)"></uni-tag>
			</view>
  • 定义 gotoGoodsList 处理函数
//点击搜索历史跳转到商品列表页面
gotoGoodsList(kw){
	uni.navigateTo({
		url:'/subpkg/goods_list/goods_list?query=' + kw 
	})
}

5.4 分支的合并与提交

  • 退回到项目根目录，打开cmd命令窗口

  • 1.将search分支进行本地提交
    – git add .
    – git commit -m ‘’

  • 2.将本地的 search 分支推送到码云
    –git push -u origin search

  • 将本地 search 分支中的代码合并到 master 分支
    –git checkout master
    –git merge search

  • 3.将本地master推送到码云
    –git push

  • 4.删除本地search分支
    –git branch -d search

相关文章