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

This article introduces the relevant knowledge of "how to solve the problem of continuous onLoad loading of van-list". 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!

Van-list constantly onLoad loaded pits

When van-list is pulled down, it is really a pit to keep asking the background to load data.

This.$http.post (url, params) .then (function (res) {this.list = []; if (res.data.data.length = = 0) {that.finished = true} else {that.list = [... that.list,... res.data.data]} that.loading = false}). Catch ((reason) = > {Toast.fail ("query list data!" + reason);})

First of all, there is a situation of continuous loading, and the solution is to set: offset= "20"

This is often said on the Internet, but it is of no use.

The reason why I keep loading here is that this.list = []

Bullshit, can not empty, after emptying will be judged not to fill the space, will continue to load.

Van-list list drop-down loads more onLoad events

Van-list is a waterfall flow scroll load that shows a long list that triggers an event and loads more list items when the list is about to scroll to the bottom.

Introduce

Import Vue from 'vue';import {List} from' vant'; Vue.use (List)

Page rendering

{{item.name}}

Data definition

Export default {data () {return {list: [], loading: false, finished: false, total: 0, / / query parameters queryParams: {pageNum: 0, pageSize: 6, deptname: null, username: null, createTime: null, jigou: null,}, defaultdept:null KeyWords: "",} },}

Method realization

Methods: {async onLoad () {this.loading = true;// prevents the first page from repeatedly loading this.queryParams.jigou = this.defaultdept listWuzicount (this.queryParams) .then (res = > {this.total = res.total; if (this.total = this.total) {this.finished = true) })},}, watch: {defaultdept (val) {this.queryParams.jigou = val this.list= [] this.queryParams.pageNum = 1 this.finished = false; this.onLoad () }, keyWords (val) {this.queryParams.deptname = val this.list= [] this.queryParams.pageNum = 1 this.finished = false; this.onLoad () },} focus on summarizing the function this.queryParams.pageNum = 1 / after walking through the function to restore the current page to 1 to prevent subsequent accumulation, resulting in invalid when clicking on other filter criteria, return finished-textthis.finished = false / / similarly, finished should be restored, otherwise, finished-text will be displayed when other filters are executed, and there will be data, but it will not be loaded. "how to solve the problem of continuous onLoad loading of van-list" is introduced here, thank you for 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.