热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序—实现搜索功能,搜索历史记录功能

本文主要基于微信小程序实现和uni-app实现搜索商品和历史记录的功能。不详细介绍,主看代码注释即可!!1、搜索组件页面代码块

本文主要基于微信小程序实现和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: &#39;&#39;, //input的最新值searchResults: [], // 搜索的结果列表historyList: [], // 搜索历史的数组};},onLoad() { // 页面开始加载获取本地搜索历史存储数据this.historyList = JSON.parse(uni.getStorageSync(&#39;kw&#39;) || &#39;[]&#39;) //页面加载获取搜索历史},methods: {input(e) { // input 输入事件的处理函数// console.log(e) //可以拿到最新的值clearTimeout(this.timer) // 清除定时器// 节流处理this.timer = setTimeout(() => { //开启定时器// console.log(e)this.kw = e // 输入框最新值 赋值给kwthis.getSearchList() // 调用获取搜索}, 500)},// 获取搜索联想建议方法async getSearchList() {// 判断input的值是否为空if (this.kw.length === 0) {this.searchResults = [] // 清空搜索结果return // 停止执行}// 获取搜索结果const {data: res} = await uni.$http.get(&#39;/api/.....&#39;, {query: this.kw})// 判断是否成功获取数据if (res.meta.status !== 200) return uni.$showMsg()// 获取成功把结果赋值this.searchResults = res.messagethis.saveSearchHistory() // 调用保存搜索历史记录},// 搜索联想列表详细页跳转方法gotoDatail(item) {uni.navigateTo({url: &#39;/subpkg/goods_detail/goods_detail?goods_id=&#39; + 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(&#39;kw&#39;, this.historyList)},// 清空搜索历史记录方法cleanHistory() { // 清空 data 中保存的搜索历史this.historyList = []// 清空本地存储中记录的搜索历史uni.setStorageSync(&#39;kw&#39;, &#39;[]&#39;)}}}
</script>

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


推荐阅读
  • 本文节选自《NLTK基础教程——用NLTK和Python库构建机器学习应用》一书的第1章第1.2节,作者Nitin Hardeniya。本文将带领读者快速了解Python的基础知识,为后续的机器学习应用打下坚实的基础。 ... [详细]
  • 技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统
    技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统 ... [详细]
  • 深入解析 Android 中 EditText 的 getLayoutParams 方法及其代码应用实例 ... [详细]
  • 技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告
    技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告 ... [详细]
  • 在C#中开发MP3播放器时,我正在考虑如何高效存储元数据以便快速检索。选择合适的数据结构,如字典或数组,对于优化性能至关重要。字典能够提供快速的键值对查找,而数组则在连续存储和遍历方面表现优异。根据具体需求,合理选择数据结构将显著提升应用的响应速度和用户体验。 ... [详细]
  • javax.mail.search.BodyTerm.matchPart()方法的使用及代码示例 ... [详细]
  • 在JavaWeb开发中,文件上传是一个常见的需求。无论是通过表单还是其他方式上传文件,都必须使用POST请求。前端部分通常采用HTML表单来实现文件选择和提交功能。后端则利用Apache Commons FileUpload库来处理上传的文件,该库提供了强大的文件解析和存储能力,能够高效地处理各种文件类型。此外,为了提高系统的安全性和稳定性,还需要对上传文件的大小、格式等进行严格的校验和限制。 ... [详细]
  • MySQL Decimal 类型的最大值解析及其在数据处理中的应用艺术
    在关系型数据库中,表的设计与SQL语句的编写对性能的影响至关重要,甚至可占到90%以上。本文将重点探讨MySQL中Decimal类型的最大值及其在数据处理中的应用技巧,通过实例分析和优化建议,帮助读者深入理解并掌握这一重要知识点。 ... [详细]
  • 如何在PHP中获取数组中特定元素的索引位置
    在PHP中获取数组中特定元素的索引位置有多种方法。首先,可以使用 `array_search()` 函数,其语法为 `array_search(目标值, $array)`,该函数将返回匹配元素的第一个键名(即下标)。其次,也可以利用 `array_keys()` 函数,通过 `array_keys($array, 目标值)` 语法来获取所有匹配元素的键名列表。这两种方法都能有效解决数组元素定位的问题,具体选择取决于实际需求和性能考虑。 ... [详细]
  • 基于Net Core 3.0与Web API的前后端分离开发:Vue.js在前端的应用
    本文介绍了如何使用Net Core 3.0和Web API进行前后端分离开发,并重点探讨了Vue.js在前端的应用。后端采用MySQL数据库和EF Core框架进行数据操作,开发环境为Windows 10和Visual Studio 2019,MySQL服务器版本为8.0.16。文章详细描述了API项目的创建过程、启动步骤以及必要的插件安装,为开发者提供了一套完整的开发指南。 ... [详细]
  • ### 优化后的摘要本学习指南旨在帮助读者全面掌握 Bootstrap 前端框架的核心知识点与实战技巧。内容涵盖基础入门、核心功能和高级应用。第一章通过一个简单的“Hello World”示例,介绍 Bootstrap 的基本用法和快速上手方法。第二章深入探讨 Bootstrap 与 JSP 集成的细节,揭示两者结合的优势和应用场景。第三章则进一步讲解 Bootstrap 的高级特性,如响应式设计和组件定制,为开发者提供全方位的技术支持。 ... [详细]
  • Python 伦理黑客技术:深入探讨后门攻击(第三部分)
    在《Python 伦理黑客技术:深入探讨后门攻击(第三部分)》中,作者详细分析了后门攻击中的Socket问题。由于TCP协议基于流,难以确定消息批次的结束点,这给后门攻击的实现带来了挑战。为了解决这一问题,文章提出了一系列有效的技术方案,包括使用特定的分隔符和长度前缀,以确保数据包的准确传输和解析。这些方法不仅提高了攻击的隐蔽性和可靠性,还为安全研究人员提供了宝贵的参考。 ... [详细]
  • Web开发框架概览:Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端,Java是一种优秀的编程语言,适用于构建各种功能模块,如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示,同时借助JavaScript增强交互性和动态效果。此外,现代Web开发还广泛使用各种框架和库,如Spring Boot、React和Vue.js,以提高开发效率和应用性能。 ... [详细]
  • 在 Vue 应用开发中,页面状态管理和跨页面数据传递是常见需求。本文将详细介绍 Vue Router 提供的两种有效方式,帮助开发者高效地实现页面间的数据交互与状态同步,同时分享一些最佳实践和注意事项。 ... [详细]
  • 本文探讨了 Java 中 Pair 类的历史与现状。虽然 Java 标准库中没有内置的 Pair 类,但社区和第三方库提供了多种实现方式,如 Apache Commons 的 Pair 类和 JavaFX 的 javafx.util.Pair 类。这些实现为需要处理成对数据的开发者提供了便利。此外,文章还讨论了为何标准库未包含 Pair 类的原因,以及在现代 Java 开发中使用 Pair 类的最佳实践。 ... [详细]
author-avatar
颂春堂中药
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有