微信小程序实现搜索商品和历史记录的功能

本文主要基于微信小程序实现和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>

以上就是实现小程序搜索功能，历史记录功能的实现，当然这也是一种实现思路方法，没有完全正确的。

希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现搜索商品和历史记录的功能的详细内容...