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

This article introduces the relevant knowledge of "how to solve the pit encountered by using the list components of the Vant framework". 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!

Introduction to pits using the list components of the Vant framework

Vant is an open source mobile component library with likes from the front-end team. It was opened in 2017 and has been maintained for 4 years.

Vant, which hosts all the core businesses internally and serves more than 100,000 developers externally, is one of the mainstream mobile component libraries in the industry.

Characteristics

Provide more than 60 high-quality components to cover all kinds of mobile scenarios

Excellent performance, average component size less than 1kb (min+gzip)

Unit test coverage is 90% wide, providing stability guarantee

Complete Chinese and English documents and examples

Support for Vue 2 & Vue 3

Support for on-demand introduction

Support theme customization

Support internationalization

Support for TypeScript

Support for SSR

Talk about the pitfalls encountered when using list components

The example code for the official document is as follows:

Export default {data () {return {list: [], loading: false, finished: false,};}, methods: {onLoad () {/ / asynchronously update data / / setTimeout is for example only. In real scenarios, it is generally ajax request setTimeout (() = > {for (let I = 0; I)

= 40) {this.finished = true;}, 1000);},},}

Effect picture:

however! You, found that it doesn't work at all! This scheduled task is simply incomprehensible, and it is illogical to hit the bottom. After several hours of research, it is found that the problem is CSS! Yes, you heard me right! It was caused by CSS!

The following code, focus on the css part, JS part, remember that settimeout do not remove, do not trust his comments, the business can be written in settimeout

Explain what this css means, that is, van-list needs to define a height and scroll adaptively so that the onLoad time can be triggered perfectly when the height is not filled or when the scroll hits the bottom. Here is another important point! Even the parent of van-list should define the height, otherwise it will not work!

As for the business must be written in the settimeout in order to be effective, the boss saw to help explain, not very clear

The use of van-list in vant

Elements in van-list cannot have float style, otherwise load events will be triggered continuously.

Original code

/ *

{{serve.name}}

¥{{serve.price}}

* / import {Tab, Tabs, List, Cell, Row, Col} from "vant"; import {FetchServeType, FetchServeList} from ".. / apis/serve.js" Export default {data () {return {active: 0, typeList: [], serviceList: [], type: ", finishedText:", finished: false, pageNum: 1, pageSize: 10, contentHeight: 0, loading: false};}, mounted () {this.getOrderStyle (); this.contentHeight = document.documentElement.clientHeight-66-40 + "px" }, methods: {async getOrderStyle () {let res = await FetchServeType (); if (res.data & & res.data.success) {this.typeList = res.data.data; this.type = res.data.data [0] .name; this.getTypeDate ();}}, getTypeDate () {this.pageNum = 1; this.type = this.typeList [this.active] .name This.serviceList = []; this.finishedText = ""; this.finished = false; this.getserviceList ();}, async getserviceList () {let toast = this.$toast.loading ({mask: true, message: "loading..."}); const {type, pageNum, pageSize} = this Let params = {type, pageNum, pageSize}; let res = await FetchServeList (params); this.loading = false; toast.close (); if (res.data & & res.data.success) {let list = (res.data.data & & res.data.data.list) | | [] If (pageNum > 1) {this.serviceList = [... this.serviceList,... list];} else {this.serviceList = list;} / / if the current number of pages = total number of pages, there is no data if (res.data.data.pageNum = res.data.data.pages) {this.finished = true This.finishedText = "- no more -";} / / if the total number of pages is greater than the current page number, the page number + 1 if (res.data.data.pages > pageNum) {this.pageNum++;}} console.log ("FetchServeList:", this.serviceList);}; .pic-content {overflow-y: scroll;-webkit-overflow-scrolling: touch .pic-box {/ * * pre-modified code * * / background-color: # fff; overflow: hidden; break-inside: avoid; box-sizing: border-box; margin-bottom: 0.7rem.padding: 0.8rem.width: 48% Height: 16remt; ~ ~ float: left;~~ / * cannot have float style * / margin: 1%; border-radius: 4px / * * Code before modification * * / p:nth-of-type (1) {padding: 0.8rem 0;} p:nth-of-type (2) {color: red;} .pic-item {height: 11rem Flex-direction: column; justify-content: center; overflow: hidden; img {width: 100%; height: auto; border-radius: 4px;}

/ / modified code (comments are modified code)

/ *

{{serve.name}}

¥{{serve.price}}

* / import {Tab, Tabs, List, Cell, Row, Col} from "vant"; import {FetchServeType, FetchServeList} from ".. / apis/serve.js" Export default {data () {return {active: 0, typeList: [], serviceList: [], type: ", finishedText:", finished: false, pageNum: 1, pageSize: 10, contentHeight: 0, loading: false};}, mounted () {this.getOrderStyle (); this.contentHeight = document.documentElement.clientHeight-66-40 + "px" }, methods: {async getOrderStyle () {let res = await FetchServeType (); if (res.data & & res.data.success) {this.typeList = res.data.data; this.type = res.data.data [0] .name; this.getTypeDate ();}}, getTypeDate () {this.pageNum = 1; this.type = this.typeList [this.active] .name This.serviceList = []; this.finishedText = ""; this.finished = false; this.getserviceList ();}, async getserviceList () {let toast = this.$toast.loading ({mask: true, message: "loading..."}); const {type, pageNum, pageSize} = this Let params = {type, pageNum, pageSize}; let res = await FetchServeList (params); this.loading = false; toast.close (); if (res.data & & res.data.success) {let list = (res.data.data & & res.data.data.list) | | [] If (pageNum > 1) {this.serviceList = [... this.serviceList,... list];} else {this.serviceList = list;} / / if the current number of pages = total number of pages, there is no data if (res.data.data.pageNum = res.data.data.pages) {this.finished = true This.finishedText = "- no more -";} / / if the total number of pages is greater than the current page number, the page number + 1 if (res.data.data.pages > pageNum) {this.pageNum++;}} console.log ("FetchServeList:", this.serviceList);}; .pic-content {overflow-y: scroll;-webkit-overflow-scrolling: touch .pic-box {/ * modified code * * / background-color: # fff; overflow: hidden; box-sizing: border-box; margin-bottom: 0.7rem.padding: 0.8rem.height: 16rem.border-radius: 4px / * modified code * / p:nth-of-type (1) {padding: 0.8rem 0;} p:nth-of-type (2) {color: red;} .pic-item {height: 11rem Flex-direction: column; justify-content: center; overflow: hidden; img {width: 100%; height: auto; border-radius: 4px;} "how to solve the pits encountered in the list components of the Vant framework" 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.