1、在实现tab页功能切换时,如果是tab标签下显示的内容不一样时,要注意快速切换tab标签时,接口数据还没有请求回来时,切到另外tab导致数据展示错乱问题
排查问题
分析:
使用场景
- bug: tab切换,当点击tab2时,由于接口反应比较慢,在数据返回之前切换tab,会造成tab2的数据会拼接在切换后的tab列表下面
- 解决方法:在tab切换时,取消未完成的接口请求
getList() { this.status == 'loading' // 用一个变量接受请求 this.req = uni.request({ url: baseUrl + '/api/userOrder', data: { page: this.page, order_status: this.tab == 0 ? 0 : this.tab == 1 ? 3 : -1 }, header: { 'content-type': 'application/x-www-form-urlencoded', 'Authorization': uni.getStorageSync('token') || '' }, method: "get", success: (res) => { let data = res.data.data if (data.length < 10) { this.status = 'nomore' } else { this.status = 'loadmore' } this.list = this.list.concat(data) uni.stopPullDownRefresh(); }, }) }, change(index) { this.req.abort() //tab切换时取消上次接口请求 this.tab = index; this.page = 1 this.status = 'loadmore', this.list = [] this.getList() },
如果以上不好实现,可以用点击tab的时候加loading,然后不然点击,加载完再让点击,就不会出现上一个tab没请求完,点击另外一个tab,导致上一个tab的数据连接在新的list上
参考来源:
https://blog.csdn.net/weixin_43848576/article/details/108535482?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-108535482-blog-107718187.235^v43^pc_blog_bottom_relevance_base7&spm=1001.2101.3001.4242.1&utm_relevant_index=1
https://blog.csdn.net/qq_29384789/article/details/107718187