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

news2024/11/23 15:16:17

项目:taro3+vue3

用法:

<at-virtual-scroll
    bench="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>
      <view
          class="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.coloradmin.cn/o/754712.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【力扣算法12】之 11. 盛最多水的容器 python

文章目录 问题描述示例1示例2提示 思路分析代码分析完整代码详细分析运行效果截图调用示例运行结果完结 问题描述 给定一个长度为 n 的整数数组 height 。有n条垂线&#xff0c;第i条线的两个端点是(i, 0)和(i, height[i])。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构…

SQL 优化换汤不换药的时代变了与SQL审核

开头还是介绍一下群&#xff0c;如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;在新加的朋友会分到3群&#xff08;共…

Kubernetes轻量级日志工具Loki安装及踩坑记录

Loki简介 Loki是Grafana出品的一个轻量级日志系统&#xff0c;熟悉ELK的都知道ELK使用起来的成本&#xff0c;而且仅仅是日志检索使用ELK的话有点大材小用了。Loki8技术栈中使用了以下组件。 Promtail 用来将容器日志发送到 Loki 或者 Grafana 服务上的日志收集工具&#xff0c…

谷歌Bard更新中文支持;GPT-4:1.8万亿参数、混合专家模型揭秘; Meta推出商用版本AI模型

&#x1f989; AI新闻 &#x1f680; 谷歌的AI聊天工具Bard更新&#xff0c;增加中文支持 摘要&#xff1a;谷歌的AI聊天工具Bard新增中文环境&#xff0c;用户可以使用简体和繁体中文进行交流。然而&#xff0c;与竞品相比&#xff0c;Bard的回复略显生硬&#xff0c;语义理…

C# Winfrom将DataGridView数据导入Excel

1.项目添加Word和Excel的COM类型库引用 2.创建Excel工作表 //定义Excel操作对象Microsoft.Office.Interop.Excel.Application excelApp new Microsoft.Office.Interop.Excel.Application();//定义Excel工作表Microsoft.Office.Interop.Excel.Worksheet worksheet excelApp.Wo…

【专题速递】在线K歌、云化XR、咔嚓剪辑和FFmpeg直播能力更新计划

// 在线K歌的技术方案选型有哪些&#xff1f;对于沉浸式XR我们又有什么新的思考&#xff1f;高性能低依赖的剪辑视频需要具备什么技术&#xff1f;7月29日LiveVideoStackCon2023上海站客户端体验与性能优化专场&#xff0c;为您解答。 客户端体验与性能优化 客户端作为直接面…

用Python画一个星空

1 问题 如何用Python画一个简单的星空&#xff1f; 2 方法 在Python中有着各种各样的工具包&#xff0c;比如math、pillow、requests等等&#xff0c;每个包有着自己专门的功能。要用python画星空&#xff0c;在绘制星空的过程中一般需要运用到turtle工具&#xff0c;它是属于P…

PVE虚拟化平台之安装RHEL9系统

PVE虚拟化平台之安装RHEL9系统 一、RHEL9介绍1.1 RHEL9简介1.2 RHEL9新功能 二、上传镜像到PVE存储2.1 检查PVE环境2.2 上传镜像 三、创建虚拟机3.1 设置虚拟机名称3.2 操作系统设置3.3 系统设置3.4 磁盘设置3.5 CPU设置3.6 内存设置3.7 网络设置3.8 确定虚拟机配置 四、安装操…

【刷题】在二叉树中分配硬币

在二叉树中分配硬币 https://leetcode.cn/problems/distribute-coins-in-binary-tree/description/ 描述 给定一个有 N 个结点的二叉树的根结点 root&#xff0c;树中的每个结点上都对应有 node.val 枚硬币&#xff0c;并且总共有 N 枚硬币。 在一次移动中&#xff0c;我们…

PLSQL Developer怎样查看当前活动会话

点‘工具’-‘会话’&#xff1a; 选择‘Active sessions’: 点击某个会话&#xff0c;可以看到其对应的sql&#xff1a;

Feign技术

说明&#xff1a;Feign和RestTemplate一样&#xff0c;是用于微服务之间通信的&#xff0c;配合注册中心技术Nacos&#xff0c;可以搭建一个完整的SpringCloud环境。本文介绍在NacosFeign环境下&#xff0c;Feign的使用。 环境介绍&#xff1a;创建两个服务&#xff0c;订单服…

Web3的2048,Sui 8192能否打开全链游戏的大门?

作者&#xff1a;Peng SUN&#xff0c;Foresight News Sui 8192&#xff1a;一局游戏就是一个NFT Sui 8192智能合约基于Move语言编写&#xff0c;构成非常简单&#xff0c;包括游戏、Game Board与排行榜&#xff08;Leaderboard&#xff09;三部分&#xff0c;覆盖方块移动、…

Linux基本知识/Linux文件夹创建、删除、复制等命令怎么用/grep管道符是啥

前情提要&#xff1a;经过一段时间的沉淀&#xff0c;因为要用到Linux&#xff0c;索性就梳理总结一下Linux的基本知识&#xff01; 一、Linux文件目录 1.1 结构 是一个树形结构&#xff0c;只有一个根目录/ 1.2 路径描述 linux系统中&#xff0c;路径层次关系用/来表示w…

IDEA安装JRebel插件激活LS client not configued问题

JRebel插件安装步骤&#xff1a;settings->Plugins中搜索JRebel&#xff0c;然后安装即可 这里安装的是最新版本&#xff0c;安装完后会要求重启IDEA&#xff0c;重启后一般会自动弹出JRebel面板&#xff0c;里面有个Activation&#xff0c;点击后弹出激活页面&#xff0c;我…

java 通过Json -schema完成对数据的效验

Json -schema 1.对象的效验2.数组套对象的效验3. 字符串的效验长度效验(minLength)(maxLength)正则效验日期和时间 4.对象套对象效验5.对象套数组6. 其他参数required(必须要填&#xff09;enum(范围之内&#xff09;not&#xff08;不&#xff09;anyOf 和allOf&#xff08;双…

C++之重写基类虚函数添加override区别(一百六十二)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

5. MySQL - JDBC SQL 注入 博客系统(万字详解)

目录 1. 介绍 2. 使用 JDBC 连接数据库 2.1 如何使用 JDBC 连接数据库 2.2 导入的各个类 2.3 DataSource 对象的创建 2.4 从 DataSource 对象中得到 Connection 对象 2.5 创建 Statement 对象 2.6 从 ResultSet 中遍历每行结果&#xff0c;从每行中获取每列的值 2.7 代…

Django-linux主机计划任务查看服务

目录 需求 功能介绍 页面效果 代码编写 docker部署 需求 线上主机一百台左右&#xff0c;经常会在某个服务器上放置一些自动化脚本&#xff0c;并配置计划任务&#xff0c;时间长可能忘记计划任务所在服务器&#xff0c;所以开发一个用于收集展示crontab任务的服务 语言框…

Coremail易念:2022年企业邮件钓鱼模拟演练分析报告

以下为精华版阅读&#xff0c;如需下载完整版&#xff0c;关注【CACTER邮件安全】&#xff0c;后台回复关键词【钓鱼报告】即可免费下载。 Coremail&易念科技《2022年企业邮件钓鱼模拟演练分析报告》重磅发布&#xff01;有哪些精华亮点&#xff0c;点击下拉。 一、制造业钓…

opencv-07-感兴趣区域(ROI)

在图像处理过程中&#xff0c;我们可能会对图像的某一个特定区域感兴趣&#xff0c;该区域被称为感兴趣区 域&#xff08;Region of Interest&#xff0c;ROI&#xff09;。在设定感兴趣区域 ROI 后&#xff0c;就可以对该区域进行整体操作。 以下是一些 OpenCV ROI应用场景 …