美文网首页
微信小程序 延迟搜索

微信小程序 延迟搜索

作者: 淡意的温柔丶 | 来源:发表于2019-10-31 14:46 被阅读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)//清除计时器
        })
      },
    
    
    })
    

    相关文章

      网友评论

          本文标题:微信小程序 延迟搜索

          本文链接:https://www.haomeiwen.com/subject/dnhtbctx.html