这里写微信小程序代码,使用的vant组件库,然后想控制频繁的切换tab让后台发送请求的评论,这里实际是二级目录,但是和一级tabs的关系不大,所以不展示了,只需要知道这是一层就好了
下面是wxml代码:
<van-tabs type="card" style="margin-top: 10rpx;" active="{{ activeTab }}" bind:change="handleTabChange">
<van-tab title="我抽到的纸条" bind:tap="loadData1"></van-tab>
<van-tab title="我放入的纸条" bind:tap="loadData2">内容 2</van-tab>
</van-tabs>
通过主tabs绑定事件handleTabChange来控制,需要再data里面定义上次接口调用的时间,和选中的标签,来记录时间和加载默认选中项
data数据:
data:{
activeTab: 0, // 默认选中我的纸条的tab
lastLoadTime01: 0, // 我的抽到纸条上一次加载数据的时间
lastLoadTime02: 0, // 我的放入纸条上一次加载数据的时间
}
加载默认选中项和切换保存默认加载
这样在其他页面切换回来还会加载之前选中的二级tab
handleOuterTabTap(){
// 根据activeTab来判断应该调用哪个方法
if (this.data.activeTab === 0) {
this.loadData1();
} else if (this.data.activeTab === 1) {
this.loadData2();
}
},
handleTabChange(e) {
// 更新activeTab
this.setData({
activeTab: e.detail.index
});
}
加载选择数据
loadData1: function() {
// 检查上一次加载数据的时间
var currentTime = new Date().getTime();
if (currentTime - this.data.lastLoadTime02 < 5000) {
// 如果距离上一次加载数据的时间小于5秒,就不加载数据
return;
}
console.log('调用loadData1')
// 更新lastLoadTime
this.setData({
lastLoadTime02: currentTime
});
},
loadData2: function() {
// 检查上一次加载数据的时间
var currentTime = new Date().getTime();
if (currentTime - this.data.lastLoadTime01 < 5000) {
// 如果距离上一次加载数据的时间小于5秒,就不加载数据
return;
}
console.log('调用loadData2')
// 更新lastLoadTime
this.setData({
lastLoadTime01: currentTime
});
},
我这里频繁的切换二级目录几十次
但是实际接口调用次数只有四次