微信小程序 延迟搜索

2019-10-31  本文已影响0人  淡意的温柔丶

实现效果:

search2.gif

实现思路:用户输入时,重置搜索等待时间

代码如下:

wxml:

<view class="body">
//这里就简单粘贴下输入框, 主要绑定 bindSearch 函数
 <input class="searchBox input" placeholder="搜索"
  placeholder-class="serchBox placeHolder" 
  maxlength="20" bindinput="bindSearch"/>
 
</view>

js

  var api = require('../../config/api.js');
  var util = require('../../utils/util.js');
Page({

  data: {
    params:"",                //搜索条件
    countTime:3000,          //延迟搜索 时间
    searchWaiting: false,  //是否等待搜索倒计时中
  },

  onLoad: function(options) {
    this.getCustList();
  },


  /**
   * 获取数据列表
   */
  getCustList: function() {
    var that=this;
    wx.showLoading({
              title: '加载中',
            });
    util.request(api.CustList, {
      pageNum:that.data.pageNum,
      pageSize: that.data.pageSize,
      params: that.data.params,
    }, "POST").then(function(res) {
      //关闭loading
      wx.hideLoading();
      if (res.code == api.RequestCodeSuccess) {
        that.setData({
          custList: res.data.list
        }
      }
    });
  },

  /**
   * 输入监听
   */
  bindSearch:function(e){
     this.setData({
       countTime:3000,
       params:e.detail.value,
     })
     //是否处于搜索倒计时中
    if (!this.data.searchWaiting){
      this.timer();
    }
     
    
  },
  /**
   *  延迟搜索  
   */
  timer: function () {
   
    var that=this;
   
    this.setData({
      searchWaiting: true
    })

    let promise = new Promise((resolve, reject) => {
      let setTimer = setInterval(
        () => {
          console.log('搜索倒计时: ' + that.data.countTime);
          this.setData({
            countTime: this.data.countTime - 1000
          })
          if (this.data.countTime <= 0) {
            console.log('开始搜索: ' + that.data.params);

            this.setData({
              countTime: 3000,
              searchWaiting: false,
            })
            resolve(setTimer)
          }
        }
        , 1000)
    })
    promise.then((setTimer) => {
      that.getCustList();//获取客户列表
      clearInterval(setTimer)//清除计时器
    })
  },


})
上一篇下一篇

猜你喜欢

热点阅读