Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to solve the problem of Vant-list pull-up loading and drop-down refresh". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Vant-list pull-up load and drop-down refresh

The first step to introduce

Import {Notify, Dialog, Image, List, PullRefresh} from 'vant'import Vue from' vue'Vue.use (Image) .use (List) .use (PullRefresh)

Step two

Step three

Data () {return {productList: [], / Asynchronous query data loading: false,// Custom bottom load prompt finished: false,// prompt copy after custom loading refreshing: false,// clear list data pageNo: 0 / / current page number}}

The fourth step

Methods: {onLoad () {this.pageNo++ setTimeout (()) > {if (this.refreshing) {this.productList = [] this.refreshing = false} this.loading = false const shopId = this.$store.state.user.shopId / / here is the ajax request pageList ({shopId: shopId, pageNo: this.pageNo) according to your business requirements PageSize: 2}) .then (res = > {if (this.validResp (res)) {this.total = res.data.pageNo this.loading = true this.productList.push (... res.data.dataList)} if (this.productList.length > = parseInt (res.data.pageNo)) {this.finished = true}})} 1000)}, onRefresh () {this.finished = false this.loading = true this.pageNo = 0 this.onLoad ()} vant drop-down refresh together with pull-up load use problem drop-down refresh to trigger twice list and pull// drop-down refresh onRefresh () {this.list = [] This.curPage = 1; this.finished = true; this.getData ();}, getData () {this.isLoading = false GetList ({curPage: this.curPage, pageSize: this.pageSize}). Then ((res) = > {this.listLoading = false; if (res.code = = 200) {this.list = this.list.concat (res.data.list) This.curPage = res.data.nextPage; if (this.list.length > = res.data.total) {this.finished = true;} else {this.finished = false })}

The reason is that pull-up loading is triggered when the drop-down refresh occurs, so it is executed twice.

The solution is

First, load the finished=true of the list group price, and determine whether the value should be true or false after loading the data, so as to avoid triggering the pull-up load when the drop-down refresh occurs.

This is the end of the content of "how to solve the problem of Vant-list pull-up load and drop-down refresh". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.