Vant—下拉刷新上拉加载

Vant—下拉刷新上拉加载

第一步： 布局

第二步： data

data () {
	return {
		data，//自己定义的数组，里面存放数据，用于v-for循环
		datacontent： [] //空数组，用来储存循环出来的内容，因为没有造假数据，所以就反复循环这个数组里的内容了，懒～～～嘻嘻
		isLoading: false,//下拉刷新
        isUpLoading:false,//上拉加载
        upFinished:false,//上拉加载完毕
        offset:100,//滚动条与底部距离小于 offset 时触发load事件
	}
}

第三步：mounted
这里只是举个例子，页面加载完成之后循环出五条内容

mounted () {
      for (var i = 0; i < 5; i++) {
        this.datacontent.push(this.data[i]) //页面一加载我就循环出来五条放进去
      }
    }

第四步： methods

methods: {
      onRefresh() { // 下拉调用此函数
        setTimeout(() => {
          this.$toast('刷新成功');  //弹出
          this.isLoading = false;
        }, 500);
      },
      onLoad () { // 上拉调用此函数
        setTimeout(() => {
          this.$toast('加载成功');//弹出
          this.isUpLoading = false;
          for (var i = 0; i < 3; i++) {
            this.datacontent.push(this.data[i]) // 上拉时循环出来这个数组的三条内容，放入datacontent这个数组里，那样就一直拉一直加
          }
        }, 500);
      },
    },