vue 翻页每次从1开始_vue.js 分页加载，向上滑动，依次加载数据。

最新推荐文章于 2024-01-30 20:54:19 发布
最新推荐文章于 2024-01-30 20:54:19 发布
阅读量218 收藏
点赞数
文章标签： vue 翻页每次从1开始
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39762464/article/details/111548880
版权

export default {

layout: 'default',

data(){

return{

page:1,

pageSize:10,

orderListArr:[],

prodListLoadingOver:false,

prodListLastPage: false,

}

},

mounted(){

window.addEventListener('scroll', this.handleScroll);

},

created(){

this.fetchOrderListAction();

},

methods:{

fetchOrderListAction(){

let reqBody = {};

reqBody.page = this.page;

reqBody.pageSize = this.pageSize;

this.prodListLoadingOver = false;

fetchOrderList(JSON.stringify(reqBody)).then((res) => {

let resData = res.data;

if (resData.respHeader && resData.respHeader.resultCode === 0) {

this.prodListLoadingOver = true;

t

最低0.47元/天 解锁文章
weixin_39762464
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue技术框架下手机端移动上拉实现分页功能
欢迎大家交流前端开发技术、经验及各种知识沉淀
08-25 2039
页面初始化时，获取后端返回的数据（返回的数据是数组形式的），将数据等分成N份，用户每次上拉到底部时，渲染下一页的数据。即：用户上拉滑动时，会触动scroll事件，当【文档高度(scrollHight)小于滚动条高度(scrollTop)加页面可视高度(clientHeight)】时，触发滚动事件(scroll事件)，页面渲染下一页的数据。注意：scrollHight是整个页面文档的高度，scrollTop是文档内容顶部到可视窗口的高度，clientHeight是页面的视口大小，实际测试中需要scrollHi
【Vue】实现上拉加载更多数据（利用vue-infinite-loading）
Pulse的博客
04-23 6407
Vue-实现上拉加载更多数据（利用vue-infinite-loading）
vue.js 分页加载，向上滑动，依次加载数据。
weixin_30919235的博客
06-13 887
export default { layout: 'default', data(){ return{ page:1, pageSize:10, orderListArr:[], prodListLoadingOver:false, prodListLastPage: f...
vue 聊天记录 向上滚动加载数据 计算滚轮位置
最新发布
Web_monkey888的博客
01-30 562
坑一：如果你获取的数据中有图片， 可以使用图片onLoad(图片加载成功)事件，写一个promise，等待所有图片load成功后，再获取scrollHeight。此时获取的scrollHeight为添加数据之后元素的高度 减去 上一次元素的高度 = 需滚动的高度。在我的示例中，每个盒子高度为50+margin10 = 60;你们应该在异步请求数据之后，nextTick之后获取scrollHeight。记录：滚轮触顶后，加载数据，重新计算滚轮所在位置。此时继续异步请求数据，操作同上。以下为全部示例代码。
聊天记录点击加载更多 滚动条位置不变
m0_56325569的博客
12-20 1860
// 滚动条到指定位置 scroll () { this.$nextTick(() => { let msg = document.getElementsByClassName('div')[0] // 获取对象 let distanceFromBottom = msg.scrollHeight - msg.scrollTop - msg.clientHeight msg.scrollTop = distanceFromBotto..
vue之上拉滚动加载页面数据
m0_58875967的博客
07-01 227
页面结构 <tuijianlp :tuijlpList="tuijlpList" /> //组件 <p class="morelp"> {{ nomore ? "没有更多了" : "正在加载..." }} </p> data() { return { tuijlpList: [], area_id: 3, datacounts: 0, //数据总条数，计算总页数 scroll: true
wordpress 缩略图_如何在WordPress中轻松显示带有缩略图的页面列表
09-04 838
wordpress 缩略图Most business websites primarily use pages for their content. Since pages are different than posts, you may need different ways to display them. In this article, we will show you how to e...
vue实现滑动到底部加载更多效果
10-16
主要为大家详细介绍了vue实现滑动到底部加载更多效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue-sliding-pagination:一个滑动分页vue组件
08-04
Vue 的滑动分页 带有滑动窗口的 ARIA 友好分页组件。 安装 节点 npm install vue-sliding-pagination --save 或者，对于 fäncÿ 人来说， yarn add vue-sliding-pagination 浏览器 目前，没有可用的浏览器版本。...
vue.js文字列表动态加载特效.zip
10-05
总的来说，这个压缩包文件提供了一个使用Vue.js进行文字列表动态加载的实例，涵盖了Vue的数据绑定、组件化、指令系统，以及结合CSS和JavaScript实现的动画效果。对于想要学习Vue.js动态加载和网页特效的开发者来说，...
如何封装了一个vue移动端下拉加载下一页数据的组件
10-17
在Vue移动端开发中，下拉加载更多数据是一个常见的需求，特别是在列表内容较多时，为了提高用户体验，通常会采用分页加载的方式。本文将详细介绍如何封装一个Vue移动端下拉加载下一页数据的组件。 首先，我们需要...
vue移动端列表组件支持下拉刷新上拉加载更多
08-12
在Vue.js移动端应用开发中，实现列表滚动时的下拉刷新和上拉加载更多功能是常见的需求，这能提供良好的用户体验，特别是在数据量大或实时更新的场景下。本篇文章将详细探讨如何在Vue.js中构建这样的功能。 一、基础...
Vue.js 开发实践：实现精巧的无限加载与分页功能
weixin_34414196的博客
05-26 304
本篇文章是一篇Vue.js的教程，目标在于用一种常见的业务场景——分页/无限加载，帮助读者更好的理解Vue.js中的一些设计思想。与许多Todo List类的入门教程相比，更全面的展示使用Vue.js完成一个需求的思考过程；与一些构建大型应用的高阶教程相比，又更专注于一些零碎细节的实现，方便读者快速掌握、致用。 需求分析 当一个页面中信息...
vue实现上拉加载更多
YingUser的博客
11-07 3652
细节 ：条数记得每次加载都要加等于。1、在页面底部添加元素。
【Vue项目复习笔记】完成上拉加载更多
qq_40992225的博客
08-05 931
所以我们的办法就是等图片异步加载完成以后，要做一次刷新，此时在我们加载更多的时候调用refresh（）方法，重新计算可滚动的区域。总结：第一，我们先要监听图片什么时候加载完成，第二，调用refresh（）方法进行一次刷新。也就是之前的item它加载的时候是不包含图片的，等加载完成以后时，它的高度就已经定下来了。因为我们上拉加载更多也不是在scroll组件中做，所以还是需要把这个事件传出去。此时出现了一个bug，虽然上拉加载了数据，但是它不能滚动了。我们的想要的功能是上拉时候，加载更多的数据。...
（VUE）JS判断滚动条滑动到底部加载更多数据，并防止事件多次触发
weixin_43736435的博客
10-20 2638
首先在mounted中添加滚动条scroll监视事件 mounted() { //监视scroll滚动条 window.addEventListener("scroll", this.isRefresh, true); }, 在isRefresh函数中，当第一次到达底部时我们将isRefreshBool变量变为false（禁止refresh()加载数据函数多次触发），当我们的refresh()函数中请求完成后再将isRefreshBool设为true（允许到达底部执行refr.
vue指令实现上下滚动翻页
weixin_39168678的博客
06-03 1449
效果 使用 直接将这段指令声明代码拷贝到需要使用该功能的vue实例上，当然你也可以全局注册 directives: { bottomScroll: { inserted: function(el, binding) { let [clientHeight, scrollHeight] = [el.clientHeight, el.scrollHeight]; el.addEventListener("scroll", e => {
vue-video-player 实现动态渲染后端传来的视频
Tkings233的博客
09-23 3784
1.安装vue-video-player npm install vue-video-player --save 2.在main.js入口文件中引入 import VideoPlayer from 'vue-video-player' require('video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css') Vue.use(VideoPlayer) 3.在页面中使用 <template.
vue分页显示.php数据,vue.js 分页加载，向上滑动，依次加载数据。
weixin_39850981的博客
03-21 149
export default {layout: 'default',data(){return{page:1,pageSize:10,orderListArr:[],prodListLoadingOver:false,prodListLastPage: false,}},mounted(){window.addEventListener('scroll', this.handleScroll);}...
vue滑动分页
06-01
要实现Vue的滑动分页，可以使用第三方的滑动分页组件如`vue-swipe`或者`vue-awesome-swiper`。这些组件都可以实现滑动分页的效果，并且可以自定义分页器的样式和布局。 以下是一个使用`vue-awesome-swiper`实现滑动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值