小程序bindinput 节流

  • A+
所属分类:微信开发

bindinput 监听 input 输入框的输入 与 节流,在mpvue中实现均可

  1. // wxml 代码:
  2. <input class='searchInput' value="{{keyWord}}" type="text" confirm-type="search" bindconfirm="searchIt" bindinput="inputValue"/>
  3. // 这种写法 bindconfirm 绑定的函数在点击软键盘右下角回车键时,触发 searchIt 函数
  4. // confirm-type="search" 写法,使右下角回车键显示为 ‘搜索’ 
  5. js 代码:
  6. // 实时监听输入框的 关键词,放到 data 中
  7.   inputValue: function(e){
  8.     var keyWord = e.detail.value;        // keyWord 为输入的值
  9.     // 假设现在需要检测到用户输入的值,用户 400 毫秒内没有继续输入就将该值打印出来
  10.     this.throttle(this.queryData, null, 400, keyWord);
  11.   },
  12. // 节流
  13.   throttle: function(fn, context, delay, text) {
  14.     clearTimeout(fn.timeoutId);
  15.     fn.timeoutId = setTimeout(function () {
  16.       fn.call(context, text);
  17.     }, delay);
  18.   },
  19. // 想要执行的函数
  20.     queryData: function(e){
  21.         console.log(e)        // 此处打印出来的就是 用户输入的值
  22.     }
weinxin
我的微信
这是我的微信扫一扫
kiven

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: