小程序搜索框的实现和搜索历史记录的实现

最新推荐文章于 2024-05-05 00:23:38 发布
最新推荐文章于 2024-05-05 00:23:38 发布
阅读量3.1k 收藏 11
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bigboy1010/article/details/105549686
版权

这段时间自学小程序编程，从组件到API的学习后，编写的第一个较为综合的小案列，编写搜索框对初学者来说最重要也是最难理解的就是定位和布局：position和display，大家一定要先把这两个属性理解透彻。这里暂时没有写点击各组件之后对应的事件，

.wxml

.mxss

————————————

  • 2.也可以利用label组件让搜索框看着更高级一点，如下

最低0.47元/天 解锁文章
bigboy1010
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app - 详细实现搜索框+ 历史记录功能，每次搜索时都会留下历史记录并且支持一键清空（类似美团淘宝等平台的搜索框，点击进入一个新页面进行搜索并留下搜索记录功能），提供详细示例源码，一键复制！
王佳斌
08-02 3720
uni-app，微信小程序，h5网页网站，安卓苹果app，详细实现搜索框和历史记录功能，前端如何实现搜索历史记录，搜索历史记录功能（纯前端实现），，uniapp实现搜索历史功能，搜索-历史记录，前端怎么如何实现搜索历史记录，uni-app搜索历史记录功能实现，搜索、历史记录功能简单实现，实现搜索商品和历史记录的功能，Uni-app实现历史搜索，uni-app使用setStorageSync存储历史搜索记录，搜索页功能模块，uniapp实现搜索功能详细步骤前端开发，uniapp中实现搜索功能和历史记录，uni
如何实现搜索历史记录
weixin_43663349的博客
08-20 1万+
方法 用缓存， 其中data为数组类型不是单个的值，因为搜索的历史记录是一个数组 搜素内容时用wx.setStorage存入缓存,每次将搜索存入缓存的时候，为了避免重复添加，要先确定要存入的搜索内容是否已经存在数组里了，已经存在不添加，不存在添加到数组头部再写入缓存覆盖之前的数组 如何判断数组是否有某个关键字 es6之前用indexOf es6用includes()方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。 如何将某个关键字写入数组的头部？ unshift()方
微信小程序之搜索框样式（带源码）
最新发布
m0_59704905的博客
05-05 1284
点击搜索框，“请输入搜索内容消失”，可输入关键字。
微信小程序实现历史搜索功能（h5同理）
苏苏就是小苏苏的博客
09-23 2186
1.实现效果 2.实现原理 将数据存在storage中。 wx.setStorageSync('search_history', JSON.stringify(this.data.list)) 取数组前15条。 if (wx.getStorageSync('search_history') ){ this.setData({ list:JSON.parse(wx.getStorageSync('search_history') ).slice(0, 15) })
微信小程序 input框实现搜索历史记录
weixin_42640297的博客
01-13 2478
微信小程序 input框实现搜索历史记录
微信小程序—实现搜索功能，搜索历史记录功能
qq_38188228的博客
08-29 3702
本文主要基于微信小程序实现和uni-app实现搜索商品和历史记录的功能。 不详细介绍，主看代码注释即可！！ 1、搜索组件页面代码块 <template> <view> <!-- uni的搜索框 --> <view class="search-box"> <uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-ba
微信小程序学习用demo：豆瓣电影：实现搜索历史记录
05-04
在这个“微信小程序学习用demo：豆瓣电影：实现搜索历史记录”项目中，我们可以深入理解微信小程序如何实现用户搜索历史记录的功能。 首先，我们需要了解微信小程序的基本结构。一个小程序通常包含`app.js`、`app....
小程序实现搜索框功能
10-16
通过以上代码的组合，我们可以创建一个具备基础搜索功能的小程序搜索框。当然，实际应用中可能还需要根据业务需求进行扩展，例如添加搜索建议、历史记录、搜索结果展示等功能。总的来说，小程序中的搜索框功能实现...
微信小程序实现搜索功能并跳转搜索结果页面
10-16
在微信小程序中实现搜索功能并跳转到搜索结果页面是提升用户体验的重要一环。下面将详细解析这个过程涉及的关键知识点。 1. **搜索页面（search.wxml）**： 页面结构由一个`<view>`容器和一个`<input>`元素组成。`...
小程序实现搜索界面 小程序实现推荐搜索列表效果
10-16
综上所述，实现小程序搜索界面及推荐搜索列表效果需要结合 WXML、WXSS 和 JavaScript，通过监听用户输入、处理点击事件、动态加载数据等方式，为用户提供流畅的搜索体验。同时，不断优化和扩展功能，提升用户的使用...
小程序实现搜索框
10-16
总结起来，实现小程序搜索框功能主要包括以下步骤： 1. 创建搜索框的UI布局，包括输入框和搜索图标。 2. 定义搜索框的样式，确保其符合应用的设计规范。 3. 在输入事件中监听用户输入，实时更新搜索结果。 4. 实现...
小程序搜索功能并对搜索出的数据存储到历史记录
05-03
用户对搜索出来的list点击后,去到下一个页面,但是也会把当前数据在当前页面做成一个历史记录,如果点击历史对应的标签会,把带着当时存下来的Id跳到detail页面
微信小程序 带搜索记录的输入框searchHaveHistory-master.zip
09-25
微信小程序 带搜索记录的输入框searchHaveHistory-master.zip
非常详细的小程序搜索历史功能
Chanyto的博客
06-17 1394
我们在进行一些项目开发时，很有可能会涉及到在搜索框中搜索某一个词条，从而进行相应的检索。在这里就会出现一个优化功能，我们在搜索后的某一个词条，我希望能够显示在历史记录中。这样一个小的tip，可以给用户带来更高的使用体验。历史记录并不会保存在后端，因为历史记录本身体积小，也为了方便对其操作，一般保存在本地中。小程序本地存储小程序本地取出搜索历史应该包含以下效果：1.空格无效2.存储词条3.删除词条4.获取词条。
微信小程序--历史搜索功能的实现
hj1214095082的博客
07-14 3436
   最近公司在做一个内部的管理系统，是基于微信小程序的，我看了一下和Vue比较类似，布局方面有HTML和CSS基础的人都可以做，还是比较容易上手的，现在先记录一下搜索框保留搜索历史的功能的实现。 ##wxml部分    直接看代码 <view class="nav_search">     <vie...
微信小程序 搜索功能，历史记录，删除
zh624040645的博客
12-30 1095
微信小程序 搜索功能，历史记录，删除
微信小程序实现历史搜索记录的本地储存和删除
热门推荐
weixin_41531446的博客
07-19 2万+
输入框和搜索按钮表单的wxml，没啥特别的，这里绑定了输入框的输入值，样式我就不放上来了 &lt;form class='searchForm' bindsubmit='searchSubmitFn'&gt; &lt;input value="{{searchValue}}" class='topInput' name='input'/&gt; &lt;butt...
小程序搜索和历史搜索配合使用组件
Frankeen的博客
01-04 609
效果图 结合之前那篇通用搜索组件文章，这篇是在通用搜索组件的基础上加上了历史搜索列表和清空历史搜索功能；该组件结合了common-search组件和common-search-history组件； 编写common-search-history组件 common-search-history组件主要向外部提供一个list属性，用来存放需要展示的list记录和向外部提供两个事件回调方法onClic...
小程序搜索框实现历史记录和跳转
04-30
要实现小程序搜索框的历史记录和跳转功能，可以按照以下步骤进行： 1. 在小程序页面中添加一个搜索框组件，并设置其bindconfirm事件，该事件会在用户点击“搜索”按钮或者按下“回车”键时触发。 2. 在bindconfirm...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值