当前位置：网站首页>How to use vant to realize data paging and drop-down loading

How to use vant to realize data paging and drop-down loading

2022-06-30 02:46:00 【Yisu cloud】

How do you use it? Vant Realize data paging and drop-down loading

This article mainly explains “ How do you use it? Vant Realize data paging and drop-down loading ”, Interested friends might as well come and have a look . The method introduced in this paper is simple and fast , Practical . Now let Xiaobian take you to learn “ How do you use it? Vant Realize data paging and drop-down loading ” Well !

Vant-ui Of van-list Realize data paging loading

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>vant Data paging , Pull down load </title>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css" rel="external nofollow"  /></head><style></style><body>  <div id='app'>    <van-list class="lazy" v-model="loading" :finished="finished" finished-text=" There is no more " @load="onLoad"      :immediate-check="false">      <div v-for="(item,index) in list" :key="index">{{item}}</div>    </van-list>  </div></body><script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script><script>  var Vue = new Vue({    el: '#app',    data: {      list: [],      page: 1,      loading: false,      finished: false,      num: 0    },    created() {      this.getList()    },    mounted() {    },    methods: {      //  Request public method       ajax(url, params, cb) {        $.ajax({          type: 'post',          url: url,          data: params,          dataType: "json",          success: function (response) {            cb(response)          }        });      },      onLoad() {        this.getList()      },      getList() {        let that = this        that.ajax('url', { kay: 'value' }, function (res) {          if (res.errcode != 0) {            that.$toast(res.msg)            return false          }          if (that.page == 1) {            that.list = res.data.list          } else {            that.list = that.list.concat(res.data.list)          }          that.loading = false;          that.page++          // The data returned from the last request is null or less than 10 strip , No more requests ,finished = true          // Change according to business needs           if (res.data.list.length == 0 || res.data.list == null || res.data.list.length < 10) {            that.finished = true            return          }        })      }    }  })</script></html>

There are three main attributes

How do you use it? Vant Realize data paging and drop-down loading

Be careful ：

v-model Each time the data is loaded, it should be set to false
finished Set as false Pull down loading will no longer be triggered after
immediate-check Set as false after , Every time you enter the page, it will not trigger load Method , Prevent the entry page from loading more than once

How do you use it? Vant Realize data paging and drop-down loading

vant Pull up to load more , The drop-down refresh

1.html

   <van-pull-refresh v-model="isLoading" @refresh="onRefresh">            <van-list              v-model="loading"              :finished="finished"              :immediate-check="false"              finished-text=" No more "              @load="onLoad"            >                      </van-list>          </van-pull-refresh>

2.js

 return {          isLoading: false,      loading: false,             page: 1,      limit: 10,      finished: false,      total: 0, //  The total number of data       List: [],     }    getHistory() {      const historyData = {        page: this.page,        limit: this.limit      }      return new Promise((resolve, reject) => {        getHistory(historyData)          .then(res => {            if (res.code === 0) {              console.log(res, ' Historical record ')              this.total = res.data.total              this.finished = !res.data.hasNext              if (res.data.list && res.data.list.length > 0) {                const tempList = res.data.list                // console.log(this.page)                if (this.page > 1) {                  this.list = this.list.concat(tempList)                } else {                  this.list = tempList //  First load                 }                this.page += 1              } else {                this.list = []              }              this.loading = false              resolve()            }          })          .catch(error => {            reject(error)          })      })    },    onLoad() {      this.getHistory()    },    onRefresh() {      this.page = 1      setTimeout(() => {        this.getHistory()        Toast(' Refresh successful ')        this.isLoading = false      }, 1000)    },

Here we are , I'm sure you're right “ How do you use it? Vant Realize data paging and drop-down loading ” Have a deeper understanding of , You might as well put it into practice ！ This is the Yisu cloud website , For more relevant contents, you can enter the relevant channels for inquiry , Pay attention to our , Continue to learn ！

原网站

版权声明
本文为[Yisu cloud]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/181/202206300238317564.html