“This is the sixth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Use Vant3 for mobile feel

Vant3 is currently being used as a mobile terminal. It feels ok and easy to use, but there are some pitfalls.Copy the code

ImagePreview use of ImagePreview

Import {ImagePreview} from 'vant'; import {ImagePreview} from 'vant'; import {ImagePreview} from 'vant'; app.use(ImagePreview); But in the need to use the page, can not be previewed in the online method directly with the official website exactly rush feeling is really quite speechless. <script> import {ImagePreview} from "vant"; Export default defineComponent({setup() {const showSpwierHander=(item)=>{ImagePreview({// The data structure of images is [ 'yourURL ','yoururl',] images: item.images, //closeable displays the small icon closeable: true,}); }}})Copy the code

My summary of List

List lists are primarily used to display long lists, loading the data for the next page when the page slides to the bottom. This component must be used when the back-end interface is paginated.Copy the code

Business logic template

<div class="scroll-height"> <van-list v-model:loading="listCont.loading" :finished="listCont.finished" :finished-text="listCont.finishedText" @load="onLoadhader" > <div class="module-list" @click="gotoPage" V -for="(item,index) in listcont. pageList" :key="index"> your contents </div> </van-list> </div> <! Function listScollHooks(){let listCont=reactive({pageList:[], loading: false, finished: False, finishedText:' no more ', params:{pageIndex: 0, // here to set to 0 pageSize: 10, } }) function onLoadhader(){ listCont.params.pageIndex+=1; listCont.loading=true; PostmyAssetPageLookApi ("); } function postmyAssetPageLookApi(type){ postmyAssetPageLook(listCont.params).then(res=>{ if(res.success&&res.data){ listCont.loading=false; / / the load end state / / cache the if (listCont. Params. PageIndex = = 1) {listCont. PageList = res. Data / / the clues, if no data suggest not query to the search results If (type=='seatch'&&res.data.length==0){listcont. finishedText=' no result '}else{listcont. finishedText=' no more '}}else{ listCont.pageList =listCont.pageList.concat(res.data); } / / / / additional data is finished loading the if (res) data) length = = 0 | | listCont. PageList. Length > = res. TotalDatas) {/ / all of the data loading is done listCont.finished=true if(type! ='seatch'){listcont. finishedText=' no more '}}else{Listcont. finished=false}}else{listcont. loading=false; Listcont. pageList=[] Listcont. finished = true; } }).catch(()=>{ listCont.loading=false; Listcont. pageList=[] Listcont. finished = true; }) } return {listCont,onLoadhader } }Copy the code

Detailed interpretation of the

Loading: false. If loading is set to true, loading is in the state; false, loading is hidden. So we will initially set loading to false. Note when onLoadhader is triggered. Vant resets loading to true, so you don't need to set loading to true. I wrote it here just to make it easier for me to understand. So ultimately you just need to reset the result of this request to false, whether it was successful or failed. Indicates that the request is complete. Finished: false, finished Specifies whether the load event will not be triggered after the load is complete. When you have finished loading all data, be sure to set FINISHED to True. If not, the browser will leak memory, which is very serious, indicating that no data can be loaded. If not, @load="onLoadhader" finishedText:' no more 'means that the @load prompt is automatically executed when the page is rendered. So you have to set the page number to zero at the beginning and every time you scroll down to the bottom, you're going to execute the @load function and one of the things to be aware of is that some of you might notice that sometimes. The @load function is executed twice after the page has been rendered. This is normal, so don't worry. Let's say your total number of entries is 5, and if you request 10 data each time, then the page will be rendered and the @load will be executed twice. There is no instant blank space on the page when going forward and backward. This is my understanding of the List componentCopy the code