微信小程序(原生)搜索功能实现

 一、效果图

 二、代码

wxml

<van-searchvalue="{{ keyword }}"shape="round"background="#000"placeholder="请输入关键词"use-action-slotbind:change="onChange"bind:search="onSearch"bind:clear="onClear"
><view slot="action" bind:tap="onSearch" style="padding: 0 26rpx; color: #fff;">搜索</view>
</van-search><view class="history" wx:if="{{!productList.length &&  historyList.length}}"><view class="title"><view class="text">搜索历史</view><view class="remove" bind:tap="handleHistoryRemove"><van-icon name="delete-o" size="18" /><text class="font">清空历史</text></view></view><view class="content"><view class="item" wx:for="{{historyList}}" wx:key="item" data-value="{{item}}"  bind:tap="hisItemClick">{{item}}</view></view>
</view><view class="total" wx:if="{{total}}">一共搜索出<text class="totalNum">{{total}}</text>产品
</view><view class="product_main"><view class="main_item" wx:for="{{productList}}" wx:key="_id"><!-- 商品的组件 -->11</view>
</view><van-emptywx:if="{{noData}}"image="https://img01.yzcdn.cn/vant/empty-image-search.png"description="没有搜索结果"
/>

scss

.history{padding: 30rpx;.title{display: flex;justify-content: space-between;align-items: center;font-size: 30rpx;color: #666;.text{font-size: 32rpx;}.remove{color: #999;display: flex;align-items: center;.font{padding-left: 5rpx;}}}.content{padding: 20rpx 0;display: flex;flex-wrap: wrap;.item{color: #333;background-color: aqua;border-radius: 20rpx;font-size: 25rpx;padding: 8rpx 25rpx;margin: 0 20rpx 20rpx 0;}}
}
.total{padding: 30rpx;font-size: 28rpx;color: #666;.totalNum{color: red;}
}
.product_main{padding: 0 30rpx;display: flex;flex-wrap: wrap;justify-content: space-between;.main_item{margin-top: 20rpx;width: 320rpx;height: 200rpx;background-color: pink;}
}

js

import {queryProduct
} from '../../api/apis'
Page({data: {historyList: [], //搜索的历史记录productList: [], //搜到的产品total: 0,keyword: '',noData:false},onLoad(options) {let hisKey = wx.getStorageSync("hisKey") || null;if (hisKey) {this.setData({historyList: hisKey})}},hisItemClick(item) {this.setData({keyword: item.currentTarget.dataset.value})this.getSearchData()},onClear() {this.setData({keyword: '',productList: [],total: 0,noData:false})},onChange(e) {this.setData({keyword: e.detail})},// 确认搜索onSearch() {if (this.data.keyword.trim().length == '') {wx.showToast({title: '请输入搜索内容',icon: 'none',})return}console.log('123');let hisArr = this.data.historyList || []hisArr.unshift(this.data.keyword)hisArr = [...new Set(hisArr)]hisArr = hisArr.slice(0, 5)this.setData({historyList: hisArr})wx.setStorageSync("hisKey", hisArr)this.getSearchData()},// 获取搜索到的数据getSearchData() {queryProduct({keyword: this.data.keyword,limit: 10}).then(res => {console.log(res);let noData = falseif(res.data.length == 0) {noData=true}this.setData({total: res.total,productList: res.data,noData})})},handleHistoryRemove() {wx.showModal({title: '提示',content: '是否确定清空历史?',success: (res)=> {if (res.confirm) {this.setData({historyList: [],productList: [], total: 0,keyword: '',noData:false})wx.removeStorageSync('hisKey')} else if (res.cancel) {console.log('用户点击取消')}}})},
})

json文件是引入的vant

{"usingComponents": {"van-search": "@vant/weapp/search/index","van-empty": "@vant/weapp/empty/index"}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/36929.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

实践-CNN卷积层

实践-CNN卷积层 1 卷积层构造2 整体流程3 BatchNormalization效果4 参数对比5 测试效果 1 卷积层构造 2 整体流程 根据网络结构来写就可以了。 池化 拉平 训练一个网络需要2-3天的时间。用经典网络来&#xff0c;一些细节没有必要去扣。 损失函数&#xff1a; fit模型&…

运维监控学习笔记1

1、监控对象&#xff1a; 1、监控对象的理解&#xff1b;CPU是怎么工作的&#xff1b; 2、监控对象的指标&#xff1a;CPU使用率&#xff1b;上下文切换&#xff1b; 3、确定性能基准线&#xff1a;CPU负载多少才算高&#xff1b; 2、监控范围&#xff1a; 1、硬件监控&#x…

线性扫描寄存器分配算法介绍

线性扫描寄存器分配 文章目录 线性扫描寄存器分配1. 算法介绍2. 相关概念3. 算法的实现3.1 伪代码3.2 图示 参考文献 论文地址&#xff1a; Linear Scan Register Allocation ​ 我们描述了一种称为线性扫描的快速全局寄存器分配的新算法。该算法不基于图形着色&#xff0c;而…

echarts3d柱状图

//画立方体三个面 const CubeLeft echarts.graphic.extendShape({shape: {x: 0,y: 0,width: 9.5, //柱状图宽zWidth: 4, //阴影折角宽zHeight: 3, //阴影折角高},buildPath: function (ctx, shape) {const api shape.api;const xAxisPoint api.coord([shape.xValue, 0]);con…

陪诊小程序开发|陪诊陪护小程序让看病不再难

陪诊小程序通过与医疗机构的合作&#xff0c;整合了医疗资源&#xff0c;让用户能够更加方便地获得专业医疗服务。用户不再需要面对繁琐的挂号排队&#xff0c;只需通过小程序预约服务&#xff0c;便能够享受到合适的医疗资源。这使得用户的就医过程变得简单高效&#xff0c;并…

【EI/SCOPUS检索】第三届计算机视觉、应用与算法国际学术会议(CVAA 2023)

第三届计算机视觉、应用与算法国际学术会议&#xff08;CVAA 2023) The 3rd International Conference on Computer Vision, Application and Algorithm 2023年第三届计算机视觉、应用与算法国际学术会议&#xff08;CVAA 2023&#xff09;主要围绕计算机视觉、计算机应用、计…

PPT颜色又丑又乱怎么办?

一、设计一套PPT时&#xff0c;可以从这5个方面进行设计 二、PPT颜色 &#xff08;一&#xff09;、PPT常用颜色分类 一个ppt需要主色、辅助色、字体色、背景色即可。 &#xff08;二&#xff09;、搭建PPT色彩系统 设计ppt时&#xff0c;根据如下几个步骤&#xff0c;依次选…

Arduino驱动红外二氧化碳传感器(气体传感器篇)

目录 1、传感器特性 2、驱动程序 红外激光传感器是将成熟的红外吸收气体检测技术与精密光路设计、精良电路设计紧密结合而制作出的高性能传感器,具有高灵敏度、高分辨率、低功耗,响应快、抗水汽干扰、不中毒、稳定性高、使用寿命长等特点。本篇博文使用Arduino驱动红外二氧…

Android学习之路(2) 设置视图

一、设置视图宽高 ​ 在Android开发中&#xff0c;可以使用LayoutParams类来设置视图&#xff08;View&#xff09;的宽度和高度。LayoutParams是一个用于布局的参数类&#xff0c;用于指定视图在父容器中的位置和大小。 ​ 下面是设置视图宽度和高度的示例代码&#xff1a; …

Win10基于 Anaconda 配置 Deeplabcut 环境

最近需要做动物行为学分析的相关研究&#xff0c;同时由于合作者只有 Windows 系统&#xff0c;于是只好在 Windows 中配置环境。说实话还真的是挺折磨的。。。 一、下载 Anaconda 可以通过清华源下载 Anaconda&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/anaconda/ar…

奥威BI数据可视化工具:报表就是平台,随时自助分析

别的数据可视化工具&#xff0c;报表就只是报表&#xff0c;而奥威BI数据可视化工具&#xff0c;一张报表就约等于一个平台&#xff0c;可随时展开多维动态自助分析&#xff0c;按需分析&#xff0c;立得数据信息。 奥威BI是一款多维立体分析数据的数据可视化工具。它可以帮助…

电脑xinput1_3.dll丢失的解决方法?哪个解决方法更简单

最近在打开软件或者游戏的时候&#xff0c;电脑提示xinput1_3.dll文件丢失的错误。这个问题导致我无法运行某些游戏和应用程序。通过一番尝试和研究&#xff0c;我找到了一些修复xinput1_3.dll文件丢失的方法&#xff0c;并在此分享给大家。 首先&#xff0c;我了解到xinput1_3…

NSI45030AT1G LED驱动器方案为汽车外部及内部照明恒流稳流器(CCR)方案

关于线性恒流调节器&#xff08;CCR&#xff09;&#xff1a;是一种用于控制电流的稳定输出。它通常由一个功率晶体管和一个参考电流源组成。CCR的工作原理是通过不断调节功率晶体管的导通时间来维持输出电流的恒定。当输出电流超过设定值时&#xff0c;CCR会减少功率晶体管的导…

红日ATT&CK VulnStack靶场(三)

网络拓扑 web阶段 1.扫描DMZ机器端口 2.进行ssh和3306爆破无果后访问web服务 3.已知目标是Joomla&#xff0c;扫描目录 4.有用的目录分别为1.php 5.configuration.php~中泄露了数据库密码 6.administrator为后台登录地址 7.直接连接mysql 8.找到管理员表&#xff0c;密码加密了…

提高学生学习效率的模拟考试系统

在如今竞争激烈的社会环境下&#xff0c;提高学生的学习效率显得尤为重要。为了帮助学生评估自己的学习水平并提供有针对性的学习建议&#xff0c;开发一款模拟考试系统是非常必要的。 一、学生信息录入 模拟考试系统首先需要学生信息录入功能。学生可以通过一个简单的表单填…

Unity游戏源码分享-中国象棋Unity5.6版本

Unity游戏源码分享-中国象棋Unity5.6版本 项目地址&#xff1a; https://download.csdn.net/download/Highning0007/88215699

【c语言】指针进阶(超详细)

文章目录 ✈ 指向函数指针数组的指针&#x1f4cc;指向函数指针数组的指针的定义&#x1f4cc;指向函数指针数组的数组指针的使用 ✈回调函数&#x1f4cc; 回调函数的定义&#x1f4cc; 回调函数的使用 ✈qsort函数&#x1f4cc; qsort函数的作用&#x1f4cc;qsort函数的定义…

【佳佳怪文献分享】安全人机交互的学习责任分配与自动驾驶应用

标题&#xff1a;Learning Responsibility Allocations for Safe Human-Robot Interaction with Applications to Autonomous Driving 作者&#xff1a;Ryan K. Cosner, Yuxiao Chen, Karen Leung, and Marco Pavone 来源&#xff1a;2023 IEEE International Conference on …

【QT】 Word模板编辑、转PDF格式

很高兴在雪易的CSDN遇见你 ,给你糖糖 欢迎大家加入雪易社区-CSDN社区云 前言 本文分享基于QT进行Word模板编辑以及Word转PDF的技术,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我的动力(^U^)ノ~YO 目录 …

机器学习-特征选择:如何使用递归特征消除算法自动筛选出最优特征?

一、引言 在实际应用中&#xff0c;特征选择作为机器学习和数据挖掘领域的重要环节&#xff0c;对于提高模型性能和减少计算开销具有关键影响。特征选择是从原始特征集中选择最相关和最具区分力的特征子集&#xff0c;以提高模型的泛化能力和可解释性。 特征选择在实践中具有以…