Writing code makes you feel good every day!

Contrib.gize. IO/contriant /#/ zh-c…

  • 1 Download the vant in the project first, and introduce the omission here

  • 2 Find the # List List in the Vant component

<van-list V-model ="loading" :finished="finished" complete-text =" no more "@load="onLoad" > // Content to render <van-cell v-for="item in list" :key="item" :title="item" /> </van-list> export default { data() { return { list: [], loading: False, finished: false, pagesize:1, // How many pages are displayed on each page pagenum:1, // The current page total:0 // Total number of pages}; }, methods:{ onLoad(){} } }Copy the code
  • Request list data and pull-up loading
Mounted (){this.getData ()}, methods:{async getdata(){let res= await axios.get(' path ',{params:{pagesize,}) Pagenum}}) this.list=[...this.list,...res.data] this.total=res.total // Loading state end this.loading = false if(this.list.length<this.pagesize){ this.finished = true } }, onLoadList() { this.pagenum++ this.getdata() }, }Copy the code
  • 4 Pull-down reload – Adds the van-pull-refresh component
<van-pull-refresh v-model="isLoading" @refresh="onRefresh"> <van-list>.... </van-list> </van-pull-refresh>Copy the code
export default{ data(){ return { isLoading:false } }, Methods :{onRefresh() {this.isLoading = false // Set the current page to 1 this.pagenum = 1 // Empty the list data this.list = [] // render data this.getdata() }, } }Copy the code

Hope to help you…..