Question

import { Scroll } from 'feui';
components: {
  [Scroll.name]: Scroll,
},
data() {
  return {
    items: [],
    infiniteCount: 0,
    hasHeader: true
  };
}
methods: {
  onRefresh(done) {
    setTimeout(() => {
      let start = this.top - 1;
      for (let i = start; i > start - 10; i--) {
        this.items.splice(0, 0, i + " With You, Just Do CSS.");
      }
      this.top = this.top - 10;
      done();
    }, 1500);
  },
  onInfinite(done) {
    setTimeout(() => {
      if (this.infiniteCount < 2) {
        let start = this.bottom + 1;
        for (let i = start; i < start + 10; i++) {
          this.items.push(i + " With You, Just Do JS.");
        }
        this.bottom = this.bottom + 10;
        this.infiniteCount++;
      }
      done();
    }, 1500);
  },
  onItemClick(index) {
    console.log(index);
  }
}

代码演示

单列Scroll

<fe-scroll class="page-content"
  :on-refresh="onRefresh"
  :on-infinite="onInfinite"
  :hasHeader="hasHeader">
  <div v-for="(item, index) in items" :key="index" 
    @click="onItemClick(index)" class='item' 
    :class="{'item-stable': index % 2 == 0}">
    {{ item }}
  </div>
  <div v-if="infiniteCount >= 2" slot="infinite" 
    class="text-center">没有更多数据</div>
</fe-scroll>

API

参数	说明	类型	默认值	可选值
hasHeader	是否有标题	Boolean	false	true,false
onRefresh	下拉刷新回调	Function	-	-
onInfinite	无限加载回调	Function	-	-
-	-	-	-	-