vue3 +Taro 页面实现scroll-view 分页功能

最新推荐文章于 2024-04-26 09:05:28 发布
最新推荐文章于 2024-04-26 09:05:28 发布
阅读量505 收藏 1
点赞数 1
文章标签： taro
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lele66688888/article/details/137551282
版权
文章讲述了如何在后端仅提供数据列表且无总页数的情况下，利用scroll-view组件的滑动事件实现前端动态分页。当每页数据量与后端返回的数量不匹配时，停止自动分页，提供了一种巧妙的前端分页解决方案。
摘要由CSDN通过智能技术生成

需求

现在分页列表 后端只给你一个分页的数据列表 没有总页数 没有当前的分页 页数

只有这么一个list 、、、

如何去分页

我这使用的是scroll-view 组件

滑动到底部的事件

根据你当前设定的每页的数据数量和后端返回给你的数据列表数量 当某一次分页 两个数量不相等了以后 就不用去分页了

这样就巧妙的解决了当前的分页问题

唱一首情歌.
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app使用scroll-view自定义下拉刷新(vue3+ts)
m0_60708088的博客
07-04 2087
uni-app使用scroll-view自定义下拉刷新(vue3+ts)
taro 滚动组件ScrollView
weixin_43294560的博客
09-25 1万+
1、使用 import { ScrollView } from '@tarojs/components' <ScrollView className='scrollview' scrollY 指定滑动方向 scrollWithAnimation 开启滑动动画 enableBackToTop 点击顶部标题栏滑动到顶部 scrollTop={n} 设置竖向滚动条位置 scrollLeft={n} 设置横向滚动条位置
Taro下拉刷新，上拉加载更多
最新发布
树尚 的博客
04-26 694
引入插件 import Taro, { Component } from '@tarojs/taro' import { View, Text, ScrollView } from '@tarojs/components' import { AtActivityIndicator } from 'taro-ui' import './index.scss' render (){} render () { let dargStyle = this.state.dargStyle;
【uniapp+vue3】scroll-view实现纵向自动滚动及swiper实现纵向自动滚动
花椒和蕊的博客
10-31 3995
scroll-view本身不支持自动滚动，通过scroll-top属性控制滚动，但是不可以循环滚动。使用swiper组件实现很简单，封装下即可用，且支持衔接滑动。
taro的分页封装
yuoveyu的专栏
11-02 518
taro+vue2的分页封装
Vue3滚动加载（懒加载）
_K500的博客
02-08 1818
滚动加载Hooks，一般用于数据量较大的列表滚动，对于大数据量渲染优化处理不仅仅只有滚动加载，还可以采用虚拟滚动，关注博主，后续带给你更多的高质量博客～
解决 uni-app vue3 scroll-view 组件 @onScrollToLower 事件在移动设备键盘展开时有时不会触发的BUG
qq1014156094的博客
03-19 750
用 @scroll 事件手动实现判断是否滚动到底部
mall:基于taro.js + vue3 + typescript + taro-ui-vue3 搭建的模板
05-23
基于taro.js + Vue3 + taro-ui-vue3 搭建的模板 环境准备 初始化 node_modules: npm install or(推荐, 尽量在执行前开启梯子) yarn 提供的脚本 具体可以查看 package.json 中的脚本列表. 主要脚本为: start 启动项目...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）
05-03
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）；精简版是基于 vue-pure-admin 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 element-plus 的情况下仍然低于...
原生小程序和Taro框架小程序分页加载
11-25
原生小程序和Taro框架小程序分页加载。为了避免随着分页数越多，更新的数组也会越大，最终超过限制。所以，避免了一次设置数据量过大，小程序setData大小限制在了1M。每次只更新数组中一项就好，不用更新全部。
vue3+taro+nutui+pina小程序空白框架
03-25
Vue3、Taro、NutUI和Pina是四个在前端开发领域中常用的技术栈，它们在构建微信小程序等移动端应用时发挥着重要作用。下面将详细解释这些技术的特性和应用场景。 1. Vue3：Vue.js 是一个流行的JavaScript前端框架，...
使用vue实现移动端h5的scroll-view
热门推荐
JiangYuXuan1994的博客
11-28 1万+
需求：移动端h5，页面顶部有nav-bar，下部有tab-bar，缺少中间内容盒子，当tab-bar页面切换时，页面滚动位置丢失，导致交互类似页面重新渲染 根据这种需求，就衍生出了scroll-view组件，下面是我结合vant实现的简易的scroll-view 首先是tab集合页 <template> <section> <van-nav-bar...
uni-app（vue3）实现对话界面，滚动条处于最下方！
weixin_48373171的博客
04-10 1385
最近在做一个自己的全栈项目，前端用的，主要也是想巩固一下uni-app这方面的知识,其中有一个页面，涉及到ai聊天的功能，我理想型是类似文心一言或者微信聊天页面的效果，但是研究半天，发现uni-app的scroll-view这个内置组件并不能像写pc的滚动条那么灵活，因为在小程序或者app没有dom这个概念，网上找了一堆资源，基本上全是vue2版本的，密密麻麻的文字，真是看不下去，自己动手，丰衣足食。
vue实现两个区域滚动条同步滚动
qq_54126505的博客
03-24 1735
vue实现两个区域滚动条同步滚动
vue3中实现滚动条触底加载数据
vitoryand的博客
11-15 670
vue3中设置滚动条触底加载，@scroll="handleScroll”
taro小程序列表滚动触底分页加载数据
EstherNi的博客
03-27 1459
taro小程序列表滚动触底分页加载数据
利用vue3SeamlessScroll简单实现列表的无限循环滚动，仅需几秒配置
firewrk的博客
09-01 1925
该组件用于实现列表的无限循环滚动。
vue3+ts+vite vue-draggable-next 按钮在区域内任意移动
07-15
在 Vue 3 + TypeScript + Vite 中使用 vue-draggable-next 插件实现按钮在区域内任意移动的功能，你可以按照以下步骤进行操作： 1. 确保你已经安装了 Vue 3、TypeScript 和 Vite，并且已经创建了一个 Vue 3 + ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值