使用Vant如何实现数据分页,下拉加载

目录
  • Vant-ui的van-list实现数据分页加载
    • 主要三个属性
  • 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/vant@2.11/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/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.11/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>

主要三个属性

注意：

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

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)
    },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于vue2实现上拉加载功能

    本文实例为大家分享了vue2实现上拉加载展示的具体代码,供大家参考,具体内容如下 因为我们项目中,还用了swiper.很多都是滑动切换的,但是又得上拉加载,所以导致,很多UI框架,我们用了,都有不同的bug出现,没办法,最后写了一个.代码如下(这个因为很多地方会用,所以建议放在components/common下面): <template> <div class="loadmore"> <slot></slot> <slot nam

  • 解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)

    1. 页面在手机端不能上下滑动,在PC端浏览器正常滑动 说明:在设置了overflow:auto;属性的前提下,H5页面在PC端浏览器里展示可以上下滑动,在ios上可正常滑动,在安卓手机 上不能上下滑动:这现象并不是ios和安卓兼容性问题! 原因:设置了touch-action: none;这属性为局部或者全局属性,将这条属性注释即可正常滑动. 2.使用PullRefresh和List列表实现下拉刷新和上拉加载时出现的问题 问题1. 下拉刷新时在手机上,不论滑到任何位置,只要下拉就刷新 原因:滑

  • Vue3 列表界面数据展示详情

    Vue3 列表界面数据展示详情

    目录 一.列表界面展示示例 2.进行数据显示 2.1.组件在列表显示 2.2.接口返回数据在列表显示 2.3.接口数据改造 2.4.list列表一行显示为多条数据 2.5.列表内容前图标样式修改 一.列表界面展示示例 现在要做的就是把打到页面的数据,带样式,也就是说好看点显示. 之前我们在<Vue3(二)集成Ant Design Vue>这篇文章中,有提及组件的使用,对于一个前端不是很好(后端也不咋的),本着拿来主义,我们能现成的是最好.最省事的方式了. 直白点说就是,找Ant Design

  • 使用Vant如何实现数据分页,下拉加载

    使用Vant如何实现数据分页,下拉加载

    目录 Vant-ui的van-list实现数据分页加载 主要三个属性 vant上拉加载更多,下拉刷新 Vant-ui的van-list实现数据分页加载 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini

  • ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前,先把实现的基本原理说一下.当夜幕下拉到底部的时候,js可以判断滚动条的位置,到达底部触发js方法,执行jquery的ajax方法,向后台一般处理程序夜幕ashx文件请求数据源,得到json格式的数据源.然后,遍历json数据源,拼接一个li标签,再填充到页面上去. 首先,我们来做个简单的html页面

  • 如何封装了一个vue移动端下拉加载下一页数据的组件

    前言 简单封装了一个vue下拉加载组件,分享一下,已放到github和前端资源库,欢迎下载! 组件代码 <template> <div class="my-scroll" :class="[scrollState?'prohibit':'allow']" ref="myScroll" @scroll.passive="onScroll($event)" @touchmove="onScroll($e

  • 结合mint-ui移动端下拉加载实践方法总结

    1.npm i mint-ui -S 2.main.js中引入import 'mint-ui/lib/style.css' 3.以下是代码结构部分: <template> <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}"> <v-loadmore :bottom-method="loadBottom" :bottom-

  • android ListView结合xutils3仿微信实现下拉加载更多

    前言:最近涉及到和QQ打交道,定义所有的好友一共只能有300条消息,如果一次性从数据库读取300条或者更多,界面会有细微的卡顿.所以考虑了下分页,第一次进来只显示20条(仿微信),当用户滑到第一条后,如果数据库有消息,则再加载20条. 步骤-问把大象关冰箱,总共分几步? 1.自定义absListview.scrollListerner 核心的东西是监听ListView的scrollListerner,这里采取拿来主义 原文连接找不到了,如果原作者看到,请联系青楼爱小生,将您的文章链接更新出来 ,

  • 微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

    微信小程序 getApp() 方法 小程序提供了全局的 getApp() 方法,可获取当前小程序实例,一般用于在子页面中获取顶层应用. // app.js App({ globalData: 1 }); // page.js var app = getApp(); console.log(app.globalData); // 获取 globalData 一 整体结构 图片目录(images).页面目录(pages).公共脚本(utils).全局配置(app.json.project.confi

  • vue中el-autocomplete支持分页上拉加载功能

    目录 el-autocomplete使用 template 实现需求分析 1. 输入框为空时聚焦或失焦后又重新聚焦不会触发请求数据接口 2. 缓存上一次已查询的数据&搜索条件:blurArr.blurTxt 3.滚动加载指令(监听容器的scroll事件并进行防抖处理) 4. 分页加载 4.0 获取数据,并进行格式化 4.1 关闭加载圈 4.2 分页加载事件 4.3 清空输入框,重置上次记录的数据 4.4 选中时记录相关数据 数据展示不稳定问题 完整的 scss 文件 完整的 js 文件 总结 e

  • el autocomplete支持分页上拉加载使用详解

    目录 el-autocomplete使用 template 实现需求分析 输入框为空时聚焦或失焦后又重新聚焦不会触发请求数据接口 缓存上一次已查询的数据&搜索条件:blurArr.blurTxt 滚动加载指令(监听容器的scroll事件并进行防抖处理) 分页加载 获取数据,并进行格式化 关闭加载圈 分页加载事件 清空输入框,重置上次记录的数据 选中时记录相关数据 数据展示不稳定问题 完整的 scss 文件 完整的 js 文件 el-autocomplete使用 效果图 template <t

  • jQuery模拟原生态App上拉刷新下拉加载更多页面及原理

    jQuery模拟原生态App上拉刷新下拉加载更多页面及原理

    很多App中,新闻或者展示类都存在下拉刷新和上拉加载的效果,网上提供了实现这种效果的第三方类(详情请见MJRefresh和EGOTableViewPullRefresh),用起来很方便,但是闲暇之余,我们可以思考下,这种效果实现的原理是什么,我以前说过,只要是动画都是骗人的,只要不是硬件问题大部分效果都能在系统UI的基础上做出来. 下面通过jQuery手机端上拉下拉刷新页面代码,很像QQ空间客户端或者微信下拉刷新页面特效代码. 请看下面效果图: 在线预览    源码下载 html代码: <div

  • vue实现ajax滚动下拉加载，同时具有loading效果(推荐)

    vue实现ajax滚动下拉加载，同时具有loading效果(推荐)

    代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue测试ajax的使用</title> <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-

随机推荐