本文主要基于微信小程序实现和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>
以上就是实现小程序搜索功能,历史记录功能的实现,当然这也是一种实现思路方法,没有完全正确的。
希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。