需求
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);
});
},