若依接口数据分页(偷懒)

uniapp中的swiper标签内,横向滚动,不触发onReachBottom()触底函数。

解决方法:

        接口设置的分页大小pageSize更改为100 或更大,直接不分页……

1、问题描述:

今天在完成对活动列表数据处理时,接口返回数据rows只显示10行数据,试图分页,结果uniapp中的swiper标签内,似乎无法触发onReachBottom()触底函数。如下图:

我的页面:

js:

2、解决思路:

查看ruoyi后端分页思路,其依据pageNum、pageSize来限制页数和每页的个数,依据分页器与pageNum的双向绑定进行分页。

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

在uniapp上,想借鉴一番,但发现有些麻烦,于是乎……直接定义pageSize

data: {
	//这是获取时传递的参数,
	pageNum: 1, //第几页
	pageSize: 100, //显示多少条
	actClass:null,//对应的活动类型
},

再使用接口:

listInfo(this.data).then(Response => {
	this.total = Response.total; //用于记录获取的数据总量
	this.swiperImgUrls = Response.rows;
	// 添加空值到 swiperImgUrls 数组的最后
	this.swiperImgUrls.push({});
})

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端接口数据分页加载数据通常需要以下步骤: 1. 在后端编写分页查询接口接口需要接收当前页码和每页显示的数据条数作为参数,并返回对应页码的数据。 2. 在前端编写分页组件,组件需要显示当前页码和总页数,并且需要绑定点击事件,当用户点击某一页码时,组件需要向后端发送请求获取对应页码的数据。 3. 在前端编写数据渲染逻辑,当获取到后端返回的数据时,需要将数据渲染到页面上。 以下是一个简单的示例代码: ```javascript // 后端接口示例: // GET /api/data?page=2&pageSize=10 // 返回对应页码的数据 // 前端分页组件示例: Vue.component('pagination', { props: { total: { type: Number, required: true }, pageSize: { type: Number, default: 10 }, current: { type: Number, default: 1 } }, computed: { pageCount() { return Math.ceil(this.total / this.pageSize); }, pages() { const pages = []; for (let i = 1; i <= this.pageCount; i++) { pages.push(i); } return pages; } }, methods: { handleClick(page) { this.$emit('change', page); } }, template: ` <ul> <li v-if="current > 1" @click="handleClick(current - 1)">上一页</li> <li v-for="page in pages" :class="{ active: page === current }" @click="handleClick(page)">{{ page }}</li> <li v-if="current < pageCount" @click="handleClick(current + 1)">下一页</li> </ul> ` }); // 前端数据渲染逻辑示例: new Vue({ el: '#app', data: { data: [], total: 0, current: 1 }, methods: { async fetchData() { const res = await axios.get('/api/data', { params: { page: this.current, pageSize: 10 } }); this.data = res.data.list; this.total = res.data.total; }, handlePageChange(page) { this.current = page; this.fetchData(); } }, mounted() { this.fetchData(); }, template: ` <div> <ul> <li v-for="item in data">{{ item }}</li> </ul> <pagination :total="total" :current="current" @change="handlePageChange"></pagination> </div> ` }); ``` 在以上示例代码中,分页组件 `pagination` 接收三个 props:`total` 表示数据总条数,`pageSize` 表示每页显示的数据条数,默认为 10,`current` 表示当前页码,默认为 1。组件通过计算属性 `pageCount` 计算总页数,通过循环生成每一页码,并且绑定点击事件。当用户点击某一页码时,组件会触发 `handleClick` 方法,该方法会通过 `$emit` 触发 `change` 事件,向父组件传递当前点击的页码。 在父组件中,通过调用 `fetchData` 方法获取数据,并将数据渲染到页面上。当用户点击分页组件中的页码时,会触发 `handlePageChange` 方法,该方法会更新当前页码并重新调用 `fetchData` 方法获取对应页码的数据

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值