微信小程序实现搜索商品和历史记录的功能
本文主要基于微信小程序实现和uni-app实现搜索商品和历史记录的功能。 不详细介绍，主看代码注释即可！！
1、搜索组件页面代码块
<template>
<view>
<!-- uni的搜索框 -->
<view class="search-box">
<uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar>
</view>
<!-- 搜索建议列表 -->
<view class="sugg-list" v-if="searchResults.length !== 0">
<view class="sugg-item" v-for="(item,i) in searchResults" :key="i" @click="gotoDatail(item)">
<view class="goos-name"> {{item.goods_name}} </view>
<uni-icons type="arrowright" size="17" ></uni-icons>
</view>
</view>
<!-- 搜索历史盒子 -->
<view class="history-box" v-else>
<!-- 历史标题区域 -->
<view class="history-title">
<text>搜索历史</text>
<uni-icons type="trash" size="17" @click="cleanHistory"></uni-icons>
</view>
<!-- 历史记录列表区域 -->
<view class="history-list">
<uni-tag :text="item" v-for="(item,i) in historyList" :key="i"></uni-tag>
</view>
</view>
</view>
</template>
页面实现效果图如下图：
2、样式代码块
<style lang="scss">
.search-box {
position: sticky; //搜索框黏性定位
top: 0;
z-index: 999;
.uni-searchbar {
background-color: #C00000 !important;
}
}
//搜索列表样式
.sugg-list {
padding: 0 5px;
.sugg-item {
display: flex;
align-items: center;
justify-content: space-between; //两端对其
font-size: 12px;
padding: 13px 0;
border-bottom: 1px solid #EEEEEE;
.goos-name {
white-space: nowrap; // 文字不允许换行
overflow: hidden;
text-overflow: ellipsis; //文本超出内容用。。。隐藏
}
}
}
//搜索历史样式
.history-box {
padding: 0 5px;
.history-title {
display: flex;
justify-content: space-between; //两侧对齐
height: 40px;
align-items: center;
font-size: 13px;
border: 1px solid #efefef;
.history-list {
display: flex;
flex-wrap: wrap;
.uni-tag {
margin: 0 2px;
}
}
}
}
</style>
3、逻辑代码块
<script>
export default {
data() {
return {
timer: null, //接收定时器
kw: '', //input的最新值
searchResults: [], // 搜索的结果列表
historyList: [], // 搜索历史的数组
};
},
onLoad() { // 页面开始加载获取本地搜索历史存储数据
this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]') //页面加载获取搜索历史
},
methods: {
input(e) { // input 输入事件的处理函数
// console.log(e) //可以拿到最新的值
clearTimeout(this.timer) // 清除定时器
// 节流处理
this.timer = setTimeout(() => { //开启定时器
// console.log(e)
this.kw = e // 输入框最新值 赋值给kw
this.getSearchList() // 调用获取搜索
}, 500)
},
// 获取搜索联想建议方法
async getSearchList() {
// 判断input的值是否为空
if (this.kw.length === 0) {
this.searchResults = [] // 清空搜索结果
return // 停止执行
}
// 获取搜索结果
const {
data: res
} = await uni.$http.get('/api/.....', {
query: this.kw
})
// 判断是否成功获取数据
if (res.meta.status !== 200) return uni.$showMsg()
// 获取成功把结果赋值
this.searchResults = res.message
this.saveSearchHistory() // 调用保存搜索历史记录
},
// 搜索联想列表详细页跳转方法
gotoDatail(item) {
uni.navigateTo({
url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
})
},
// 保存搜索历史记录并持久化历史搜索方法
saveSearchHistory() {
// 查找搜索历史结果数组中，重复的搜索
const index = this.historyList.findIndex(x => x === this.kw) // 返回结果 -1代表没有
// 判断是否大于0 大于等于存在
if (index >= 0) {
// 删除找到记录
this.historyList.splice(index, 1)
}
// 把input新值向数组开头添加
this.historyList.unshift(this.kw)
//持久化搜索历史
uni.setStorageSync('kw', this.historyList)
},
// 清空搜索历史记录方法
cleanHistory() {
// 清空 data 中保存的搜索历史
this.historyList = []
// 清空本地存储中记录的搜索历史
uni.setStorageSync('kw', '[]')
}
}
}
</script>
以上就是实现小程序搜索功能，历史记录功能的实现，当然这也是一种实现思路方法，没有完全正确的。
希望对大家的学习有所帮助，也希望大家多多支持软件开发网。
