当前位置：网站首页>怎么使用Vant实现数据分页和下拉加载

怎么使用Vant实现数据分页和下拉加载

2022-06-30 02:38:00 【亿速云】

怎么使用Vant实现数据分页和下拉加载

本篇内容主要讲解“怎么使用Vant实现数据分页和下拉加载”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用Vant实现数据分页和下拉加载”吧!

Vant-ui的van-list实现数据分页加载

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>vant数据分页，下拉加载</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="没有更多了" @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: {      // 请求公共方法      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++          //最后一次请求返回的数据为空或小于10条，不在请求，finished = true          //根据业务需求更改          if (res.data.list.length == 0 || res.data.list == null || res.data.list.length < 10) {            that.finished = true            return          }        })      }    }  })</script></html>

主要三个属性

怎么使用Vant实现数据分页和下拉加载

注意：

v-model 每次数据加载完成要置为false
finished 置为false后将不再触发下拉加载
immediate-check 置为false后，每次进入页面将不会触发load方法，防止进入页面多次加载

怎么使用Vant实现数据分页和下拉加载

vant上拉加载更多,下拉刷新

1.html

   <van-pull-refresh v-model="isLoading" @refresh="onRefresh">            <van-list              v-model="loading"              :finished="finished"              :immediate-check="false"              finished-text="没有更多了呦"              @load="onLoad"            >                      </van-list>          </van-pull-refresh>

2.js

 return {          isLoading: false,      loading: false,             page: 1,      limit: 10,      finished: false,      total: 0, // 总共的数据条数      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, '历史记录')              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 // 第一次加载                }                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('刷新成功')        this.isLoading = false      }, 1000)    },

到此，相信大家对“怎么使用Vant实现数据分页和下拉加载”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

原网站

版权声明
本文为[亿速云]所创，转载请带上原文链接，感谢
https://www.yisu.com/zixun/722120.html