1. 程式人生 > 其它 >vue上拉重新整理下拉載入

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