taro-ui-vue3 的虚拟列表组件VirtualScroll

项目:taro3+vue3

用法:

<at-virtual-scrollbench="5":height="listHeight":items="fieldList":item-height="itemHeight"
><template #default="{ index, item }"><view :id="`merchant-item-${index}`"class="merchant-item f-l-c"><image class="logo" src=""></image><view class="con">索引号-{{ index }}</view><viewclass="navigator"><image class="img-navigator" src=""></image></view></view></template>
</at-virtual-scroll>

参数

height — 列表容器高度
item-height — 列表item高度
items — 列表数据

注意点:item-height不能直接用设计稿里面的高度xxpx,要转成rpx, 而css里面item的高度用设计稿的高度,比如设计稿宽750px, item高200px,间距20px, 列表容器高度是81vh, 如果容器需要减去其他元素的高度,其他元素高也要转rpx

const itemHeight = computed(() => {return Math.ceil(Taro.getSystemInfoSync().windowWidth / 750 * 220)
})const listHeight = computed(() => {return Taro.getSystemInfoSync().windowHeight * 0.81
})

效果:

在这里插入图片描述
源码中每个item都是通过定位来显示的,第一个top为0,之后的是item-height * index, 所以item-height中要包含每个item的间隔

问题:

列表向下滚动没有问题,但是向上回滚时,节点不能和视图相对应

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/22820.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浏览器视口

目录 css单位相对单位绝对单位 像素分类物理像素逻辑像素css像素 DPRPPI浏览器视口布局视口视觉视口理想视口 css单位 在css中我们会使用到许多单位&#xff0c;如px&#xff0c;em&#xff0c;rem&#xff0c;vw&#xff0c;vh等等 整体上&#xff0c;我们可以将它们分成两类…

windows下安装consul、springboot整合consul

Spring Cloud Consul通过自动配置和绑定到Spring Environment和其他Spring编程模型习语&#xff0c;为Spring Boot应用程序提供Consul集成。通过一些简单的注解&#xff0c;可以快速启用和配置应用程序内的常用模式&#xff0c;并使用Hashicorp的Consul构建大型分布式系统。提供…

Elasticsearch--查询(nested、join)

nested 嵌套类型 数据的某个值是json、object对象&#xff1b;不再是简单的数据类型&#xff0c;或者简单数据类型的数组&#xff1b;那么还用之前的查询方式就有问题了。因为ES在存储复杂类型的时候会把对象的复杂层次结果扁平化为一个键值对列表 。此时&#xff0c;需要用n…

MyBatis 中如何使用缓存

MyBatis 中如何使用缓存 MyBatis 是一个基于 Java 的持久层框架&#xff0c;它提供了多种方式来使用缓存&#xff0c;包括一级缓存和二级缓存。本文将介绍 MyBatis 中常见的缓存使用方式及其使用方法。 1. 一级缓存 MyBatis 中的一级缓存是指 SqlSession 的缓存&#xff0c;它…

2023机器人操作系统(ROS)暑期学校预热-线下时间/地点-(转发)

原文地址&#xff1a; https://mp.weixin.qq.com/s/McjBgCpecL6OMgpcrPyY_Q 中国机器人操作系统&#xff08;ROS&#xff09;暑期学校自2015年举办以来&#xff0c;被中国机器人业界和学界&#xff0c;以及ROS开源基金会誉为除了ROSCon之外规模最大、参与人数最多、最成功的RO…

【JAVA】与数字相关的类,Number Math 类

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️初识JAVA】 文章目录 前言数据类型Number类介绍数据格式化实例 Math类介绍静态常量实例 前言 为了解决对数字、日期和系统设置进行处理的困难&#xff0c;如&#xff1a;一些数字&数学问题、随机…

React中 Real DOM 和 Virtual DOM 的区别?优缺点?

一、是什么 Real DOM&#xff0c;真实 DOM&#xff0c;意思为文档对象模型&#xff0c;是一个结构化文本的抽象&#xff0c;在页面渲染出的每一个结点都是一个真实 DOM 结构&#xff0c;如下&#xff1a; Virtual Dom&#xff0c;本质上是以 JavaScript 对象形式存在的对 DOM …

【Visual Studio】在 Windows 上使用 Visual Studio 配合 Qt 构建 VTK

知识不是单独的&#xff0c;一定是成体系的。更多我的个人总结和相关经验可查阅这个专栏&#xff1a;Visual Studio。 编号内容1【Visual Studio】在 Windows 上使用 Visual Studio 构建 VTK2【Visual Studio】在 Windows 上使用 Visual Studio 配合 Qt 构建 VTK3【VTK】VTK 显…

OpenCv色彩空间

目录 一、RGB 二、图像处理入门 三、色彩空间的转换 一、RGB 在表示图像时&#xff0c;有多种不同的颜色模型&#xff0c;但最常见的是红、绿、蓝(RGB) 模型RGB 模型是一种加法颜色模型&#xff0c;其中原色 (在RGB模型中&#xff0c;原色是红色 R、绿色 G 和蓝色 B)混合在…

打工人如何利用自动化实现职场突围

作为优秀的打工人&#xff0c;如果可以将办公中的重复性、繁琐性、低效性工作自动化&#xff0c;那么将省去许多日常工作。许亚宁就是这样一个优秀的打工人&#xff0c;善于使用各类自动化工具来提升工作效率&#xff0c;上周的直播他分享了如何利用自动化工具&#xff0c;实现…

Qt,day4

闹钟 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget) {ui->setupUi(this);this->setWindowTitle("闹钟");this->setWindowIcon(QIcon("D:\\HQYJRJ\\QT\\day1\\…

运输层(TCP运输协议相关)

运输层 1. 运输层概述2. 端口号3. 运输层复用和分用4. 应用层常见协议使用的运输层熟知端口号5. TCP协议对比UDP协议6. TCP的流量控制7. TCP的拥塞控制7.1 慢开始算法、拥塞避免算法7.2 快重传算法7.3 快恢复算法 8. TCP超时重传时间的选择8.1 超时重传时间计算 9. TCP可靠传输…