基于Taro列表组件VirtualList的源码改造方案

最新推荐文章于 2024-03-29 09:58:00 发布
最新推荐文章于 2024-03-29 09:58:00 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： Taro 文章标签： 小程序 Taro VirtualList
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28978893/article/details/116995232
版权

RecyclerList

这是一款基于@tarojs/components/virtual-list组件实现的高性能列表组件，除性能优化之外，亦扩展了大量API以尽可能满足大部分应用场景。

npm install --save recyclerlist

简介

recyclerlist在@tarojs/components/virtual-list的基础上改造而来，整体思路为延续其展示可视区域，销毁非可视区域元素的思路，并结合recyclerlistview的内存复用机制对其性能进行调优，其中原理下面我会提到。当然做这些工作的前提是virtual-list组件对子组件绝对布局的支持。

实现了哪些功能

  • 多列自定义高度瀑布流
最低0.47元/天 解锁文章
孟凡涛
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
taro-list:Taro 列表滚动组件
04-16
taro-list 支持下拉刷新 、 加载更多 、虚拟列表 安装及使用 npm i taro-list 小程序 demo 配置文件里添加 copy: { patterns: [ { from: 'node_modules/taro-list/dist/weapp/components/List/refresh.wxs', to: 'dist/npm/taro-list/dist/weapp/components/List/refresh.wxs', }, { from: 'node_modules/taro-list/dist/weapp/components/List/index.template.wxml', to: 'dist/npm/taro-list/dist/w
ant design List长列表下拉刷新 上拉加载更多
qq_31182399的博客
04-15 2183
1、html import styles from './index.less'; import { ListView,List,PullToRefresh } from 'antd-mobile'; const Item = List.Item; const Brief = Item.Brief; const { theadData, data, total, currentPage, onSuccess, onSuccessEnter, isMore, showNum,refreshing
ant-design-mobile实现ListView拉动刷新显示上次更新时间
WebView
03-06 315
1、在APP上刷新实现上次更新时间是常见的需求，在这里分享一下在PullToRefresh 实现这一效果代码。 2、实现思路是：在每次刷新的时候记住当前时间即可。 3、代码配置在于PullToRefresh 的一个配置项： 4、 pullToRefresh={ <PullToRefresh refreshing={refreshing} onRefresh={this.onRefresh}
Taro（vue2）小程序虚拟列表实操
DIWUCH的博客
05-18 1763
目录前言一、先通俗易懂的理解虚拟列表二、使用步骤1.引入库2.读入数据总结 前言 项目突降需求，开发微信小程序，经过几轮对比，选择了Taro + Vue2开发，其中遇到了一个虚拟列表的坑点，特此记录下踩坑和跳坑的过程 一、先通俗易懂的理解虚拟列表 其实这个已经被用烂了的前端优化手段，没啥可讲的，但我不一样，我就是要再复习一遍。（不想看的可以跳过到第二个标题） 一般需要虚拟列表介入的情况就是：当前页面已经 或 可预见会加载很大量级的数据。 就像世道无情但人间有情一样，列表无限但可视有限，虚拟列表揉圆搓
干货 | Taro虚拟列表最佳实践
携程技术
07-15 1948
作者简介不浪，携程高级前端开发工程师，关注前端热门技术，目前从事小程序的相关开发与优化。一、背景最近组内小程序项目从Taro1迁移到了Taro3，紧跟凹凸实验室的步伐，开发体验确实比版本...
基于Typescript的Taro开放式跨端跨框架解决方案设计源码
最新发布
05-23
Taro是一个基于Typescript开发的开放式跨端跨框架解决方案，包含2726个文件，其中包括1383个Markdown文件、632个JavaScript文件、357个TypeScript文件、90个JSON文件、84个TSX文件、34个PNG图片文件、25个UX文件和19...
基于 Taro 框架开发的多端 UI 组件库
10-10
综上所述，基于 Taro 框架开发的多端 UI 组件库为开发者提供了一种高效、灵活且一致的跨平台开发解决方案。通过使用这个组件库，开发者可以专注于业务逻辑，而无需过于关心不同平台的兼容问题，从而提高开发效率，...
基于 Taro 框架开发的一款在线云打印微信小程序源码.zip
06-06
"基于 Taro 框架开发的一款在线云打印微信小程序源码" 指示了这是一个使用 Taro 框架构建的微信小程序项目，其主要功能是实现在线云打印服务。Taro 是一个开源的多端开发框架，允许开发者使用 React 的开发方式来...
基于Taro和Taro-UI仿知乎微信小程序-源码
10-02
在"基于Taro和Taro-UI仿知乎微信小程序_源码"的压缩包中，包含了项目的所有源代码，包括页面组件、样式文件、配置文件以及可能的示例数据。通过对这些源码的学习和研究，开发者可以深入理解Taro和Taro-UI的使用方式...
一行代码解决Taro中VirtualList虚拟列表渲染抖动的问题
清颖的博客
07-19 1996
问题背景：使用Taro 提供的组件库 VirtualList 时，数据源长度改变后，发生渲染抖动。读完本篇文章，你可以获得： 虚拟列表概念 虚拟列表的使用场景 性能优化策略-key 虚拟列表渲染抖动的问题解决 表格抖动或渲染错误的解决方向
芋头列表视图：芋头框架长列表方案：集成拖动刷新，框架屏，无限滚动，图片懒加载；
02-04
:package: :rocket: 芋头列表视图 列表内部懒模块-解决小程序图片过多内存问题 骨架扩展状态屏 virtual-list（WIP）【虚拟列表】 支持TaroV3，NPM版本2.xx 安装方式 安装： npm i taro-listview ， yarn add taro-listview 使用案例 组件 !!!需给组件设置固定高度 API 列表显示 可配置参数 页面状态控制参数 属性 说明 类型 默认值 必传 风格 -- -- -- -- 懒 开启（默认为父元素className且开启） 布尔值或字符串 错误或“ .lazy-view” -- 有更多的 加载更多 布尔值 真正 真正 是空
react-virtual-list：超简单的虚拟化列表React组件
02-21
用于版本^15.0.0 || ^16.0.0超简单虚拟化列表^15.0.0 || ^16.0.0 。 react-virtual-list允许您显示固定高度项目的大列表，而仅使这些项目在屏幕上可见。 这允许使用少得多的DOM元素呈现大列表。 其他好处： 一个依赖项（它是prop-types ） 性能-演示页面几乎总是保持60fps以上的速度 将您的组件分开-作为高阶组件 让您控制-不会强制执行任何特定的标记，但会为您提供必要的样式和数据以供使用。 遗产 如果您正在寻找支持~0.13.x版本1的文档，请~0.13.x。 安装 您可以使用安装 。 > npm install react-virtual-list --save 用法 ./lib/VirtualList.js模块导出单个ES5兼容的，可访问CommonJS的组件工厂。 import VirtualList from 'r
vue局部组件刷新
diwang_718的博客
08-10 2135
背景： UI框架：antd vue，一个导入文件的功能，导入成功之后列表页的数据就会改变，但是我这边导入成功之后，打印的数据是更新了，页面却没有更新… 对此我的解决方法是导入成功之后，局部刷新列表组件，原理控制路由的显示隐藏(v-if)，由路由的显示隐藏达到组件重新渲染的效果。 首先：我们在App.vue中，定义一个变量(isRouterAlive)为true,控制路由的显示隐藏，然后定义一个方法（reload）,调用该方法之后组件重新刷新，然后必须要将这个方法定义在provide注入依赖，其子孙都可以用这
ant design vue中list的滚动加载 重复加载的坑
m0_51909257的博客
03-07 3219
在用到antedesignvue中滚动加载的list组件时，发现当滚动条滚动到底部时，总会触发两次加载；滚动到底部再向上滚动时也会触发请求。这个过程会导致多余的请求，甚至会导致请求的数据不对。 解决 自己写一个滚动的监听 mounted() { this.$nextTick(() => { // 滚动的容器 const el = document.querySelector('.demo-infinite-container') const offsetHe
探索Taro 3 Virtual List：高效渲染大型列表的秘密武器
gitblog_00043的博客
03-29 514
探索Taro 3 Virtual List：高效渲染大型列表的秘密武器 项目地址:https://gitcode.com/tingyuxuan2302/taro3-virtual-list Taro 是一个多端开发框架，它允许开发者编写一次代码，部署到包括微信小程序、H5、React Native 等多个平台。而 taro3-virtual-list 则是基于 Taro 的一个扩展库，专门用于在这...
@tarojs/taro版本3.3.16，引用VirtualList 实现虚拟列表报错及解决
weixin_42280496的博客
10-09 304
其实这类问题挺常见的，依赖库的版本不一致，出现的奇奇怪怪的问题。我们也可以让两个项目的版本保持一致，比如修改demo上taro版本 排查和修复问题后再移植到公司项目。taroui官方文档中3.x的VirtualList文档用的就是item，小版本应该是有那部分模块和属性名、方法等有略微差异。看了下demo上@tarojs/taro版本为3.6.8，和公司项目的3.3.16版本确实不一致，我们先翻译下该错误，告知找不到children。demo和公司项目用的同样的代码片段，参照taro官网写的。
vue实现上拉刷新下拉刷新加载
m0_53912016的博客
08-31 3144
vue移动端 详情前往我的码云 !<template> <!-- 使用vant组件来写下来刷新加载 --> <div> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> <div v-for="(item, index) in list" :key="index"> <div @c
Antd vue a-list 列表的使用
m0_58002936的博客
08-15 4644
其中，slot-scope 可以包含两个参数，item（就是我的 goodsList），index。比如，我将从后端取到的商品放到前端展示，在 a-list 中取出单个商品，放到 a-card 中就可以展示了。:data-source 设置数据源，这里我将请求后端获取的商品列表设置为数据源。...
vue实现元素拖动并互换位置
宋承佑
07-29 6351
项目场景： 在使用Vue的场景下，需要实现对元素进行拖动交换位置。 需求分析： 1、两两交换的其实是数组的下标。数据内容不变。 2、拖拽功能需要用到一下API。 方法名 详解 ondraggable 设置元素是否允许被拖动。链接和图片默认是可拖动，因此不用设置该属性 ondragstart 用户开始拖动元素或选择的文本时触发。 ondragover 拖动元素或选取的文本正在拖动到放置目标时触发。默认情况下，数据/元素不能放置到其他元素中。 如果要实现改功能，我们需要防止元素的默认
taro video组件
07-28
在 Taro 中，可以使用 video 组件来展示视频内容。 video 组件的基本用法如下： ```jsx import Taro from '@tarojs/taro'; import { View, Video } from '@tarojs/components'; function VideoComponent() { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值