vue实现触底查询功能

 更新时间:2021年11月25日 12:59:19   作者:@洛飞  
这篇文章主要为大家详细介绍了vue实现触底查询功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现触底查询功能的具体代码,供大家参考,具体内容如下

1.使用vant-list组件相关内容如下:

2.对象绑定值的默认值:

3.查询方法:

完整代码:

methods: {
    getdata() {
      let status=3;
      this.queryParams.params={
        status:status,
        passFactory: this.$store.state.user.werksName 
      }
      let params = JSON.parse(JSON.stringify(this.queryParams));
      api.getPageList(params).then((res) => {
        if (res.success) {
          this.dataList = res.data.content;
        } else {
          Toast.fail({
            message: res.msg
          });
        }
      });
    },
     onLoad() {//触底查询
      this.queryParams.page += 1; 
      let _this = this;
      let status=3;
      this.queryParams.params={
        status:status,
        passFactory: this.$store.state.user.werksName 
      }
      let params = JSON.parse(JSON.stringify(this.queryParams));
      api.getPageList(params).then((res) => {
       if(res.success){
          this.dataList = this.dataList.concat(res.data.content);
          if (this.dataList.length >= res.data.totalElements) {
            this.finished = true;
          } else {
            this.finished = false;
          }
          this.loading = false;
        }
      });
    },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue.js中使用微信扫一扫解决invalid signature问题(完美解决)

    vue.js中使用微信扫一扫解决invalid signature问题(完美解决)

    这篇文章主要介绍了vue.js中使用微信扫一扫解决invalid signature问题(推荐),本文通过实例代码给出解决方法,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)

    vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)

    我发现好多倒计时的插件,刷新都会变成从头再来,于是自己用vue2.0写了一个,感觉还不错,特此分享到脚本之家平台供大家参考下
    2017-03-03
  • Vue项目报错:Uncaught SyntaxError: Unexpected token '<'的解决方法

    Vue项目报错:Uncaught SyntaxError: Unexpected token '<&a

    最近在做vue项目时,需要引入一个第三方的js文件,在index.html中通过以下方式引入JS文件编译后就报了这个问题,这篇文章主要给大家介绍了关于Vue项目报错:Uncaught SyntaxError: Unexpected token '<'的解决方法,需要的朋友可以参考下
    2022-08-08
  • 手把手教学vue的路由权限问题

    手把手教学vue的路由权限问题

    这篇文章主要介绍了手把手教学vue的路由权限问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue3 + Vue-PDF 实现PDF 文件在线预览实战

    Vue3 + Vue-PDF 实现PDF 文件在线预览实战

    这篇文章主要介绍了Vue3 + Vue-PDF 实现PDF 文件在线预览实战,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-06-06
  • Vue实现批量注册全局组件的示例代码

    Vue实现批量注册全局组件的示例代码

    在项目开发中,我们经常会封装一些全局组件,然后在入口文件中统一导入,所以本文主要为大家详细介绍了Vue如何批量注册全局组件,感兴趣的小伙伴可以了解下
    2024-01-01
  • Django Vue实现动态菜单和动态权限

    Django Vue实现动态菜单和动态权限

    本文主要介绍了Django Vue实现动态菜单和动态权限,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 开发Vue树形组件的示例代码

    开发Vue树形组件的示例代码

    本篇文章主要介绍了开发Vue树形组件的示例代码,它展现了组件的递归使用。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 前端vue如何根据菜单自动生成路由(动态配置前端路由)

    前端vue如何根据菜单自动生成路由(动态配置前端路由)

    估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单,这篇文章主要给大家介绍了关于前端vue如何根据菜单自动生成路由的相关资料,需要的朋友可以参考下
    2024-04-04
  • 基于Vue CSR的微前端实现方案实践

    基于Vue CSR的微前端实现方案实践

    这篇文章主要介绍了基于Vue CSR的微前端实现方案实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05

最新评论