Vant 2.0 下拉刷新，上拉加载

Vant 2.0 下拉刷新，上拉加载

核心代码如下：

  
    

    
    
      

        
          
        

        

          
            {{ item.newsTitle }}


            {{ item.createTime }}
          

        
      

    

    


  




import {
  listNews
} from "@/api/business/news/news.js";

export default {
  name: 'Test',
  data() {

    return {
      isFixedHeight: true,

      refreshing: false,
      loading: false,
      finished: false,
      dataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        newsTitle: undefined,
        newsType: undefined,
        status: undefined
      },
    };
  },


  methods: {
    getCoverImage(res) {
      return process.env.VUE_APP_BASE_API + res
    },
    onClickLeft() {
      //返回上一页
      this.$router.go(-1)
    },
    getList() {

      listNews(this.queryParams).then(response => {
        if (this.refreshing) {
          this.dataList = [];
          this.refreshing = false;
        }
        // 加载状态结束
        this.loading = false;
        this.dataList = this.dataList.concat(response.rows);//追加数据
        this.finished = !response.hasNext;
        this.queryParams.pageNum += 1;//页数+1
      });
    },
    onRefresh() {
      this.queryParams.pageNum = 1
      // 清空列表数据
      this.dataList=[]
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.getList();
    },
  },

  created() {
    // this.getList();
  }

}


.container{
  width: 100%;
  height: 100%;
}
.news-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}