页面onload时,初次加载数据
向下滑动一部分,切换第二栏,再返回第一栏。
1.**u-tabs为uview框架组件
html:
<u-tabs
:list="list"
:current="current"
@change="onTabchange"
style="width: 100%"
></u-tabs>
<swiper
style="width: 100%; height: 100%"
:current="current"
circular
@change="onSwiperChange"
>
<swiper-item
v-for="(item, index) of list"
:key="index"
style="overflow-y: auto; height: 300px"
>
<view v-for="i in 100" :key="i">{{ i }}</view>
</swiper-item>
</swiper>
js:
export default {
components: {},
data() {
return {
list: [
{
name: "待收货",
},
{
name: "待付款",
},
{
name: "待评价",
},
],
current: 0,
hasLoad: [],
};
},
onLoad(e) {
this.getData();
},
onPullDownRefresh() {
this.hasLoad.splice(this.current, 1);
this.getData();
},
mounted() {},
methods: {
onTabchange(e) {
const { index } = e;
this.current = index;
},
onSwiperChange(e) {
const { current } = e.detail;
this.current = current;
this.getData();
},
getData() {
console.log("已经切换过的索引列表:", this.hasLoad);
console.log(
"当前索引是否在已请求索引列表里:",
this.hasLoad.includes(this.current)
);
if (this.hasLoad.includes(this.current)) return;
this.hasLoad.push(this.current);
setTimeout(() => {
console.log("模拟请求数据");
}, 200);
},
},
};