vue上拉刷新下拉加载

<van-sticky>
        <van-search v-model="value" placeholder="搜索内容" @input="searchCon" />
</van-sticky>
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >    
        <div
            class="prise_div"
            v-for="(item, index) in priseList"
            :key="index"
          ></div>
        </van-list>
</van-pull-refresh>    

data() {
    return {
        value: "",
        loading: false, // 列表是否处于加载状态
        finished: false,
        refreshing: false,
        priseList: [], 
        enterpriseName:"",
        query: {
            pageNum: 1,
            pageSize: 10,
        },
        total:""
    }
},
methods: {
    getPriseList (callBack) {
         async isPriseList(this.query).then((res) => {
            this.total = res.data.total
            if (this.refreshing) {
              this.priseList = res.data.list
            } else {
              this.query.pageNum++
              this.priseList = this.priseList.concat(res.data.list)
            }
           // 加载状态结束
           this.loading = false
            // 数据全部加载完成
            if (this.priseList.length >= this.total) {
              this.finished = true
            }
            this.BaiduMap()
            callBack() // 请求完接口后调用回调函数，用于刷新和上拉加载的数据重置
      })
    },    
    // 搜索内容
    searchCon(e) {
          console.log(e);
          this.priseList = [];
          this.query.pageNum = 1; // 页数设为1
          this.query.enterpriseName = e; // enterpriseName 接口返回的搜索名字
          this.getPriseList(); // 接口调用
    },
    onRefresh () {
          this.query.pageNum = 1
          this.getPriseList(() => {
            this.refreshing = false
          })
    },
    onLoad () {
          this.getPriseList()
    },
}   

van-sticky van-pull-refresh van-list  

具体操作看vant官网：https://youzan.github.io/vant/#/zh-CN