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

本文主要基于微信小程序实现和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 // 输入框最新值 赋值给kwthis.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.messagethis.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>

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

微信小程序—实现搜索功能，搜索历史记录功能相关推荐

微信小程序利用云开发实现评论功能
微信小程序利用云开发实现评论功能如果喜欢可以给我一个关注. 一.微信小程序,评论功能的实现. 首先我们先布局,一个文章或者是商品,底下是评论,  <vie ...
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
微信小程序开发教程第八章：微信小程序分组开发与左滑功能实现
接着上面微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开 ...
微信授权绑定手机号 java_微信小程序获取手机号授权用户登录功能
小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无 ...
微信小程序开发（2） - 微信小程序实现拍照和录像拍摄功能方法
微信小程序开发2 - 本文实例讲述了微信小程序实现拍照和录像拍摄功能方法.分享给大家供大家参考,具体如下: 微信小程序拍照: API:wx.chooseImage 原先的想法是使用微信的camera组 ...
wifi 小程序透传_微信小程序实现的一键连接wifi功能示例
本文实例讲述了微信小程序实现的一键连接wifi功能.分享给大家供大家参考,具体如下: 在已知wifi账号和wifi密码的情况下,一般采用以下的流程来连接wifi Wi-Fi 接口调用: 1.Andro ...
【微信小程序/实现】实现留言墙功能页面
[微信小程序/实现]实现留言墙功能一.需求分析二.功能设计三.页面设计四.代码 (一)核心代码:向服务器发出请求 (二)完整代码 message.wxml message.wxss messa ...
微信小程序云开发CMS中WebHook功能的使用方法
微信小程序云开发CMS中WebHook功能的使用方法官方文档 Webhook 是什么呢,翻译过来就是网页钩子.它的用处是,当我们在CMS进行增添查改的操作后,会自动回调webhook函数,我们就可以 ...
微信小程序实现生成二维码功能并下载到本地
微信小程序实现生成二维码功能并下载到本地背景实现备注背景有这样一个需求,后台返回了url地址,微信小程序将url地址转成二维码图片,展示在页面上,并且该二维码图片可下载到用户手机相册中实现 ...
php 微信小程序获取手机号_实例讲解微信小程序获取手机号授权用户登录功能...
小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写.本文主要给大家分享微信小程序获取手机号授权用户登录功能,需要的朋友参考下吧, ...

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

微信小程序—实现搜索功能，搜索历史记录功能相关推荐

最新文章

热门文章