热门标签 | 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>

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


推荐阅读
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社区 版权所有