【vue】实现页面滚动加载_vue滚动加载

页面内容太多会导致加载速度过慢，这时可考虑使用滚动加载即还没有出现在可视范围内的内容块先不加载，出现后再加载
基本思路就是判断元素是否出现在浏览器的可视区域，出现了就加载请求接口加载内容。但是要求内容块有最小高度。
具体代码如下

<template>
  <div>
    <div
      v-loading.fullscreen.lock="loading"
      class="page"
      id="tablist"
      @scroll="listScroll"
    >
      <div
        class="item"
        v-for="(item, i) in testData"
        :key="i"
        :class="i % 2 == 0 ? 'gray' : 'white'"
        :id="item.id"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ScrollLoadingSample",
  props: {},
  data() {
    return {
      flag: true, // 开关
      loading: false, // loading加载
      testData: [], // 列表数据
      targetIndex: 0,
      nextId: "",
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.testData = [
        {
          id: "test-1",
          name: "区块1",
          // 要加载的方法名
          function: "loadTest1",
          // 方法是否加载了
          isLoaded: false,
        },
        {
          id: "test-2",
          name: "区块2",
          function: "loadTest2",
          isLoaded: false,
        },
        {
          id: "test-3",
          name: "区块3",
          function: "loadTest3",
          isLoaded: false,
        },
        {
          id: "test-4",
          name: "区块4",
          function: "loadTest4",
          isLoaded: false,
        },
        {
          id: "test-5",
          name: "区块5",
          function: "loadTest5",
          isLoaded: false,
        },
        {
          id: "test-6",
          name: "区块6",
          function: "loadTest6",
          isLoaded: false,
        },
      ];
      this.$nextTick(() => {
        this.loadPage();
      });
    },
    //判断元素是否在可视区域
    isElementInViewport(id) {
      let el = document.getElementById(id);
      //获取元素是否在可视区域
      let rect = el.getBoundingClientRect();
      return (
        rect.top + rect.height / 2 <=
          (window.innerHeight || document.documentElement.clientHeight) &&
        rect.bottom > 0
      );
    },

    // 初次加载页面时
    loadPage() {
      for (let i = 0; i < this.testData.length; i++) {
        if (this.isElementInViewport(this.testData[i]["id"])) {
          this.loadFunctionByName(this.testData[i]["function"]);
          this.testData[i]["isLoaded"] = true;
        } else {
          this.targetIndex = i;
          // 最开始没出现在页面上的id
          this.nextId = this.testData[this.targetIndex]["id"];
          break;
        } 
      }
    },
    // 页面滑动
    listScroll() {
      for (let i = this.targetIndex; i < this.testData.length; i++) {
        // 如果出现在页面上
        if (this.isElementInViewport(this.testData[i]["id"])) {
          // 如果方法没有加载
          if (!this.testData[i]["isLoaded"]) {
            this.loadFunctionByName(this.testData[i]["function"]);
            this.testData[i]["isLoaded"] = true;
          }
        } else {
          // 如果没有出现在页面上
          this.targetIndex = i;
          this.nextId = this.testData[this.targetIndex]["id"];
          break;
        }
      }
    },
    // 根据方法名加载
    loadFunctionByName(functionName) {
      switch (functionName) {
        case "loadTest1":
          this.loading = true;
          // 模拟延迟请求
          setTimeout(() => {
            console.log("加载区块1");
            this.loading = false;
          }, 1000);
          break;
        case "loadTest2":
          this.loading = true;
          // 模拟延迟请求
          setTimeout(() => {
            console.log("加载区块2");
            this.loading = false;
          }, 1000);
          break;
        case "loadTest3":
          this.loading = true;
          // 模拟延迟请求
          setTimeout(() => {
            console.log("加载区块3");
            this.loading = false;
          }, 1000);
          break;
        case "loadTest4":
          this.loading = true;
          // 模拟延迟请求
          setTimeout(() => {
            console.log("加载区块4");
            this.loading = false;
          }, 1000);
          break;
        case "loadTest5":
          this.loading = true;
          // 模拟延迟请求
          setTimeout(() => {
            console.log("加载区块5");
            this.loading = false;
          }, 1000);
          break;
        case "loadTest6":
          this.loading = true;
          // 模拟延迟请求
          setTimeout(() => {
            console.log("加载区块6");
            this.loading = false;
          }, 1000);
          break;
      }
    },
  },
};
</script>


<style scoped>
.page {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: center;
  align-items: center; */
}
.item {
  width: 100vw;
  height: 25vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gray {
  background-color: #d5d1d1;
}
.white {
  background-color: white;
}
.loading {
  width: 80px;
  height: 100px;
  background: rgba(0, 0, 255, 0.664);
  display: inline-block;
}
</style>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219

需要注意 getBoundingClientRect()这个方法，正是通过这个方法获取元素位置，从而判断是否出现在可视区域