Blame view

examples/routers/scroll.vue 1.43 KB
c6487ddf   梁灏   update dependencies
1
  <template>
78b46fa6   梁灏   Scroll add local ...
2
      <Scroll :on-reach-edge="loadData">
c6487ddf   梁灏   update dependencies
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
          <section v-for="item in list">
              <div class="city">
                  <p>{{ item }}</p>
              </div>
          </section>
      </Scroll>
  </template>
  <script>
      export default {
          data () {
              return {
                  list: [1,2,3,4,5,6,7,8,9,10]
              }
          },
          methods: {
              loadData (dir) {
                  return new Promise(resolve => {
                      setTimeout(() => {
                          if (dir > 0) {
                              const first = this.list[0];
                              for (let i = 1; i < 11; i++) {
                                  this.list.unshift(first - i);
                              }
                          } else {
                              const last = this.list[this.list.length - 1];
                              for (let i = 1; i < 11; i++) {
                                  this.list.push(last + i);
                              }
                          }
                          resolve();
                      }, 500);
                  });
              }
          }
      }
  </script>
  <style>
      section {
          margin: 20px;
      }
      section > div {
          width: 300px;
          padding: 15px;
          margin: 5px;
          background-color: #ddf;
          border: 1px solid #446;
          border-radius: 5px;
          margin: 0 auto;
      }
  
      .ivu-scroll-container {
          height: 500px;
      }
  </style>