首页 > 其他分享 >uniapp 触底 请求分页接口

uniapp 触底 请求分页接口

时间:2024-01-24 15:58:40浏览次数:29  
标签:uniapp getProductList 请求分页 res 接口 pages current data page

<scroll-view @scrolltolower="scrollBottom">
   <product-list :goodspage="goodspage"></product-list>
</scroll-view>
scrollBottom() {
      console.log('scroll bottom')
      if (this.page.current < this.page.pages) {
        this.page.current++
        this.getProductList()
      }
    },
async getProductList() {
      const res = await this.$api.getProductList(
        {
          page: {
            current: this.page.current,
            size: this.page.size,
          },
        },
      )
      this.page.total = res.data.total
      this.page.pages = res.data.pages
      this.page.current = res.data.current
	  //把返回来的新数据添加到原有数组中
      this.goodspage = [...this.goodspage, ...res.data.records]
    },
mounted() {
    this.getProductList()
  },

标签:uniapp,getProductList,请求分页,res,接口,pages,current,data,page
From: https://www.cnblogs.com/tangshidedabenniao/p/17984842

相关文章

  • 在TypeScript项目中搭配Axios封装后端接口调用
    前言本来是想发next.js开发笔记的,结果发现里面涉及了太多东西,还是拆分出来发吧~本文记录一下在TypeScript项目里封装axios的过程,之前在开发StarBlog-Admin的时候已经做了一次封装,不过那时是JavaScript,跟TypeScript还是有些区别的。另外我在跟着next.js文档开发的......
  • UniApp Vue3 动态表单
    左侧手机部分为动态表单内容,右侧为提交后获取到表单的值。页面代码:<viewstyle="margin:15px;padding:10rpx;"><tn-formlabel-position="top"ref="formRef":model="formData":rules="formRules"><tn-for......
  • CDP技术系列(三):百万级QPS的人群命中服务接口性能优化指南
    一、背景介绍CDP系统提供了强大的标签和群体的构建能力,面对海量数据的标签和群体,我们采用了Bitmap+ClickHouse的存储与计算方案。详细内容可以参考之前文章。有了群体之后,它们被广泛的应用到支付,消金,财富,营销等各种核心业务的用户拉新,交易转化,促活等核心链路中。而人群应用方式......
  • CDP技术系列(三):百万级QPS的人群命中服务接口性能优化指南
    一、背景介绍CDP系统提供了强大的标签和群体的构建能力,面对海量数据的标签和群体,我们采用了Bitmap+ClickHouse的存储与计算方案。详细内容可以参考之前文章。有了群体之后,它们被广泛的应用到支付,消金,财富,营销等各种核心业务的用户拉新,交易转化,促活等核心链路中。而人群应用方式中,基......
  • 接口数据传递中的跨域问题
    跨域问题产生原因原因大部分浏览器自带的保护措施,限制用户在一个域名下请求另一个域名的数据一、关于跨域跨域对于前后端开发者来说,就像一块狗皮膏药,无论是面试还是开发中,都会经常遇到。之所以出现跨域问题,是因为浏览器的同源策略,为了隔离潜在的恶意文件,为了防御来自歪门邪......
  • java8 函数式(Functional)接口
    什么是函数式(Functional)接口 只包含一个抽象方法的接口,称为函数式接口。 你可以通过Lambda表达式来创建该接口的对象。(若Lambda表达式抛出一个受检异常(即:非运行时异常),那么该异常需要在目标接口的抽象方法上进行声明)。 我们可以在一个接口上使用@FunctionalInterfa......
  • uniapp打包Android程序的踩坑
    因为在uniapp中无法使用dom,导致部分三方库无法使用,需要在webview中使用,所以需要把使用了dom的三方库的页面渲染到webview中去因为上面再webview中渲染了界面,所以当要再webview中和原生页面互动就又是问题了,网上找了一圈webview和uniapp原生互动的操作都没能实现,有实现了的评论下......
  • postman 接口测试工具常见用法
    postman不适合做压力测试工具postman接口测试工具,并不适合做压力测试,实际上即便把循环间隔设置为0,postman的请求频率依旧不高,postman是等待接口响应完成以后再发送下一个请求,所以postman是测不到并发问题的,jmeter可以做到异步请求,请求发的飞快,有并发测试要求或者需要比较强的压......
  • 梳理Langchain-Chatchat知识库API接口
    一.Langchain-Chatchat知识库管理1.Langchain-Chatchat对话和知识库管理界面  Langchain-Chatchatv0.28完整的界面截图,如下所示:2.知识库中源文件和向量库  知识库test中源文件和向量库的位置,如下所示:3.知识库表结构  knowledge_base数据表内容,如下所示:二.......
  • uniapp+unicloud开发一个网页端,小程序端,APP端,桌面端的博客CMS系统——万能的三三
    前言做为一个开发者,怎么能没有一个自己的博客呢?都说现在是小程序,APP时代了,显然只有网页端已经跟不上时代了,于是乎就想找一个免费的能同时支持网页端,小程序,APP的博客系统...于是花了一点点时间,没找到合适的...好吧,那既然自己是开发者,那为什么不能自己写一个博客呢?于是又花亿点点时间......