搜索请求下需要闪烁的效果vue

需求

vue使用的项目中页面搜索需要闪烁,项目中通过判断输入框的值得变化来请求数据,要求每次发起请求都需要页面闪烁

解决方案

在每次请求数据的时候把数据先清空,清空后再次请求数据,此时页面会闪烁一下。
随便贴点代码

// 监听动作搜索闪烁
    flicker(){
      // 顶部搜索内容改变
      let id = this.$route.query.id;
      let flag = this.$route.query.flag;
      let tagid = this.$route.query.tagid;
      let keyWord = this.inputSearch;
      let allpa = {
        pageNumber: 1,
        pageSize: 5,
        keyWord:keyWord
      };
      //此处先清空数据再调用接口达到闪的效果
      this.banners = [];
      this.details = [];
      this.pageCount = 1;
      this.channelname = "";
      // 数据调用
        api
          .$http(api.servers + "/open/api/cms/allNews", allpa)
          .then(res => {
            this.details = res.data.mapList;
            this.pageCount = res.data.totalPage;
            this.channelname = res.data.channelName;
          })
          .catch(err => {
            alert(err);
          });

      api
        .$http(api.servers + "/open/api/cms/banner") //banner图
        .then(res => {
          this.banners = res.data;
          // console.log(res)
        })
        .catch(err => {
          alert(err);
        });
    
    },

猜你喜欢

转载自blog.csdn.net/qq_40557812/article/details/83744081