vue 用户输入搜索与无限下拉

vue项目中,用户输入关键字搜索,并且手机端做无限下拉

watch: {
            'getListForm.searchKey'(val) { 
                        this.radioChange(); // 还有其他逻辑,内部调用getDeviceList
            }
        }

 1 getDeviceList() {
 2                 apiGetDeviceList(Qs.stringify(this.getListForm)).then(res => {
 3                     if (this.getListForm.pageNumber === 1) { // 搜索第一页 清空
 4                         this.deviceList = [];
 5                     }
 6                     this.deviceList.push(...res.list); // 数组合并
 7                     if (res.totalPage === 1 || res.totalPage < this.getListForm.pageNumber) {
 8                         this.loading = false;
 9                         this.finished = true;
10                     }
11                     this.loading = false;
12                     this.getListForm.pageNumber++;
13                 })
14             },

后来测试同学发现问题,当用户输入过快,网络缓慢的情况下,搜索结果不准确,由于上一次输入结果没有及时返回,导致多次插入数组

解决方案如下

1 watch: {
2             'getListForm.searchKey'(val) { // 判断用户停止输入 val值是为此次监控的值,但是input 绑定的this.getListForm.searchKey 却是双向输入,那么每隔500毫秒检测一次,直到用户停止输入
3                 setTimeout(() => {
4                     if (val === this.getListForm.searchKey) { 
5                         this.radioChange();
6                     }
7                 }, 500)
8             }
9         }

版权声明：本文来源博客园，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://www.cnblogs.com/machete/p/10557330.html
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2019-11-17 14:47:42
阅读 ( 957 )
分类：前端

vue 用户输入搜索与无限下拉

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

vue 用户输入搜索 与无限下拉

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

vue 用户输入搜索与无限下拉