vue上拉重新整理下拉載入
阿新 • • 發佈:2021-06-23
<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