微信小程序如何实现搜索框的防抖功能

1、首先给输入框绑定一个bindinput事件，只要输入框内的值改变就会触发该函数

 <input  placeholder="请输入您要搜索的内容" bindinput="handleInput"> </input>

2、定义一个变量timeId，该值为定时器的返回值，作用是方便等会儿清除定时器。

3、在handleInput函数中先清除定时器，然后再设置一个定时器，发送请求，就实现了防抖功能。

timeId:0，//输入框内的值改变就会触发该函数handleInput(e) {const {value} = e.detail  //拿到输入框中的值clearTimeout(this.timeId) //清除定时器this.timeId=setTimeout(()=>{this.search(value) //发送请求，间隔时间为1s},1000)},//向后台发起搜索的request请求search(value) {const {data} = request({url: '地址', data: {value}})console.log(data)}

微信小程序如何实现搜索框的防抖功能相关推荐

微信小程序开发(3)——搜索框一键清除
小程序的input输入可以获取到实时输入数据,一键删除功能需要借助input的value属性 1.搜索框的数据获取要在<input>标签中设置bindinput='search'属性 & ...
微信小程序 - 商城项目 - 搜索框组件
搜索框组件引入自定义的搜索框组件引入扩展组件需要对搜索框组件实现一个粘性布局功能,引入官方的扩展组件 npm 安装扩展组件引入扩展组件构建 npm 实现粘性布局(在iphone5上可以实现, ...
微信小程序头部自定义搜索框斗鱼等
效果图代码 app.js App({onLaunch: function (res) {// 自定义标题栏测试const that = this;// 获取系统信息const systemInfo ...
微信小程序最全搜索功能
微信小程序最全搜索功能主要功能: 搜索点击x号清空输入框内容点击取消返回上一页面搜索数据为空提示历史记录清空历史记录点击历史记录搜索点击搜索列表带参数返回上一页面代码如下: < ...
微信小程序—模拟豆瓣搜索电影（图文）
微信小程序-模拟豆瓣搜索电影先新建search目录和page 1.在search.wxml页面给input添加bindinput事件给input写一个value值,用来清空给button绑定b ...
微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
微信小程序之底部弹框预约插件
代码地址如下: http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq. ...
第7课微信小程序实现图片搜索器案例：
第7课微信小程序实现图片搜索器案例: 效果图如下: 手机运行效果: 来我们来看看代码的全局样式: 首先在app.json内的pages把需要的index1.index2页面注册之后我们只需写ind ...
零基础也能学会的微信小程序制作动态搜索页
零基础也能学会的微信小程序制作动态搜索页准备工作: 微信开发者工具 APPID或测试号创建一个JavaScript基本框架(如下图) 最终效果: 动手做起来吧~ index.wxml <vi ...
微信小程序点击按钮弹出弹窗_微信小程序开发弹出框实现方法
本文主要和大家分享微信小程序开发弹出框实现方法,本文所分享的代码很清晰,希望能帮助到大家. 消息提示框模态弹窗操作菜单 1.消息提示--wx.showToast(OBJECT) //show.js ...

微信小程序如何实现搜索框的防抖功能

微信小程序如何实现搜索框的防抖功能

微信小程序如何实现搜索框的防抖功能相关推荐

最新文章

热门文章