<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