uniapp开发手机APP、H5网页、微信小程序、长列表插件

ml-list

插件地址：https://ext.dcloud.net.cn/plugin?id=18928

ml-list介绍

1、ml-list 列表组件，包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。
2、ml-list 低代码列表，帮助使用者快速构建列表，简单配置，快速上手。
3、支持自定义懒加载，优化长列表渲染性能，提升视图渲染效率.

ezgif-1-a6423aa111

ezgif-1-46f8fa65d9

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

代码演示

以下代码均可复制粘贴直接运行

不使用插槽，showListIndex：可自定的高扩展的 懒加载机制，优化长列表提升渲染效率，提高用户体验。

<template><button :type="column==1?'primary':''" @click="change(1)">单列</button><button :type="column==2?'primary':''" @click="change(2)">双列</button><button :type="showCount>0?'primary':''" @click="changeCount(10)">使用showListIndex</button><button :type="showCount<=0?'primary':''" @click="changeCount(0)">不使用showListIndex</button><ml-listv-if="list&&list.length>0":column="column":list="list" ref="mlListRef":noMore="noMore" :showListIndex="showCount"@rowClick="rowClick"><!--  还可以增加其他内容，这里的内容可有可无--><template v-slot="{item, index}"><text style="color: #ff8f0e;">{{index + 1}}不改变组件的上，继续增加内容</text></template></ml-list>
</template>
<script setup>import { ref } from 'vue';import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';const column = ref(1);const showCount = ref(10);const list = ref([]); // 列表数据const noMore = ref(false); // 是否没有更多数据了const mlListRef = ref(null); // mlList 组件实例，mlListRef.value.refreshList();刷新视图列表let counter = 1;const change = (num) => {list.value = [];counter = 1;loadMore();column.value = num;uni.showToast({ title: num+"", icon:"none", mask:false });};const changeCount = (num) => {list.value = [];counter = 1;loadMore();showCount.value = num;uni.showToast({ title: num+"", icon:"none", mask:false });};/*** 加载更多*/const loadMore = () => {uni.showLoading({ title: "加载中。。。" });setTimeout(() => {uni.hideLoading();getList().forEach((item) => {item.title = `[${list.value.length + 1}]${item.title}`;list.value.push(item);});}, 500);};/*** 点击了列表* @param row 当前行数据* @param index 当前行的索引*/const rowClick = (row, index) => {console.log(index, row);uni.showToast({ title:row.title, icon:"none", mask:false });};/*** 下拉刷新，需要在page.json中开启下拉刷新功能*/onPullDownRefresh(() => {list.value = []; // 重新请求后台，刷新当前页面数据uni.showLoading({ title: "加载中。。。" });// 模拟请求后台，获取数据setTimeout(() => {uni.hideLoading();// 加载到数据后，停止刷新uni.stopPullDownRefresh();getList().forEach((item) => {item.title = `[${list.value.length + 1}]${item.title}`;list.value.push(item);});}, 500);});/*** 滑动到底，加载更多数据*/onReachBottom(() => {// 更新列表数据mlListRef.value.refreshList();if (counter >= 3) {noMore.value = true;return;}counter ++;loadMore();});/*** 页面加载，请求后台 获取数据*/onLoad(() => {// 模拟请求后台，拿到数据uni.showLoading({ title: "加载中。。。" });setTimeout(() => {uni.hideLoading();getList().forEach((item) => {item.title = `[${list.value.length + 1}]${item.title}`;list.value.push(item);});}, 500);});/*** 模拟 后台返回的数据列表*/const getList = () => {let tempList = [];for (var i = 0; i < 15; i++) {tempList.push({title: "List 列表组件，包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。",url: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg",});};return tempList;  };
</script>

注意：如果使用了showListIndex，则触发onReachBottom触底事件时，一定要调用refreshList()方法来刷新视图，mlListRef.value.refreshList();

使用自定义插槽，开始自定义插槽:itemSlot="true"，showListIndex：可自定的高扩展的 懒加载机制，优化长列表提升渲染效率，提高用户体验。

<template><button :type="column==1?'primary':''" @click="change(1)">插槽单列</button><button :type="column==2?'primary':''" @click="change(2)">插槽双列</button><button :type="showCount>0?'primary':''" @click="changeCount(10)">使用showListIndex</button><button :type="showCount<=0?'primary':''" @click="changeCount(0)">不使用showListIndex</button><ml-listv-if="list&&list.length>0":column="column":list="list" ref="mlListRef":itemSlot="true":noMore="noMore" :showListIndex="showCount"@rowClick="rowClick"><!-- :itemSlot="true" 使用插槽，开启自定义配置 --><template v-slot:item="{item, index}"><image :src="item.url" style="width:99%;height:100px;"></image><text style="color: #ff8f0e;">自定义插槽</text><text> {{item.title}} </text></template></ml-list>
</template>
<script setup>import { ref } from 'vue';import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';const column = ref(1);const showCount = ref(10);const list = ref([]); // 列表数据const noMore = ref(false); // 是否没有更多数据了const mlListRef = ref(null); // mlList 组件实例，mlListRef.value.refreshList();刷新视图列表let counter = 1;const change = (num) => {list.value = [];counter = 1;loadMore();column.value = num;uni.showToast({ title: num+"", icon:"none", mask:false });};const changeCount = (num) => {list.value = [];counter = 1;loadMore();showCount.value = num;uni.showToast({ title: num+"", icon:"none", mask:false });};/*** 加载更多*/const loadMore = () => {uni.showLoading({ title: "加载中。。。" });setTimeout(() => {uni.hideLoading();getList().forEach((item) => {item.title = `[${list.value.length + 1}]${item.title}`;list.value.push(item);});}, 500);};/*** 点击了列表* @param row 当前行数据* @param index 当前行的索引*/const rowClick = (row, index) => {console.log(index, row);uni.showToast({ title:row.title, icon:"none", mask:false });};/*** 下拉刷新，需要在page.json中开启下拉刷新功能*/onPullDownRefresh(() => {list.value = []; // 重新请求后台，刷新当前页面数据uni.showLoading({ title: "加载中。。。" });// 模拟请求后台，获取数据setTimeout(() => {uni.hideLoading();// 加载到数据后，停止刷新uni.stopPullDownRefresh();getList().forEach((item) => {item.title = `[${list.value.length + 1}]${item.title}`;list.value.push(item);});}, 500);});/*** 滑动到底，加载更多数据*/onReachBottom(() => {// 更新列表数据mlListRef.value.refreshList();if (counter >= 3) {noMore.value = true;return;}counter ++;loadMore();});/*** 页面加载，请求后台 获取数据*/onLoad(() => {// 模拟请求后台，拿到数据uni.showLoading({ title: "加载中。。。" });setTimeout(() => {uni.hideLoading();getList().forEach((item) => {item.title = `[${list.value.length + 1}]${item.title}`;list.value.push(item);});}, 500);});/*** 模拟 后台返回的数据列表*/const getList = () => {let tempList = [];for (var i = 0; i < 15; i++) {tempList.push({title: "List 列表组件，包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。",url: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg",});};return tempList;  };
</script>

注意：如果使用了showListIndex，则触发onReachBottom触底事件时，一定要调用refreshList()方法来刷新视图，mlListRef.value.refreshList();

props

属性名类型默认值可选值说明是否必填
columnNumber21列表显示列表数，1-单列表，2-双列表否
imageWidthString--列表中图片展示的宽度否
showMoreBooleantruefalse是否显示 loadMore 加载更多组件否
maxLinesNumber2 | 4-文本展示行数，超出指定行数则显示…否
noMoreBooleanfalsetrue是否没有更多数据，默认false，当为 true时，不再触发 loadMore 去加载数据否
itemSlotBooleanfalsetrue是否使用自定义插槽，默认false，当为true时，默认组件将不在展示否
stytleObject{}-自定义样式，需要使用 Object 的形式否
listArray[]-数据列表是
showListIndexNumber0-懒加载机制，可视界面下渲染的列表数量，用于优化 大量数据下的列表渲染，提高性能，注意，使用showListIndex时一定要调用refreshList()方法刷新整个视图，否则后面的数据将不会展示否

list[option]【组件配置项】

属性名类型默认值可选值说明是否必填
titleString--名称是
urlString--图片是
…Any--其他自定义参数，点击后尽数返回-

事件 Events

事件名返回参数说明
@rowClick（row, index）当点击了列表时，触发该rowClick事件，并返回当前点击的数据和索引
@loadMore--（过时，后续将剔除）推荐使用onReachBottom来自定义触底加载更多
@refresh--（过时，后续将剔除）推荐使用onPullDownRefresh来自定义刷新事件

组件方法 methods

方法名参数说明
stopRefresh--（过时，后续将剔除）
。。。。。。--

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

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

相关文章

秋招突击——6/26~6/27——复习{二维背包问题——宠物小精灵之收服}——新作{串联所有单词的字串}

秋招突击——6/26~6/27——复习{二维背包问题——宠物小精灵之收服}——新作{串联所有单词的字串}

文章目录 引言复习二维背包问题——宠物小精灵之收服个人实现重大问题 滚动数组优化实现 新作串联所有单词的字串个人实现参考实现 总结 引言 今天应该是舟车劳顿的一天&#xff0c;头一次在机场刷题&#xff0c;不学习新的东西了&#xff0c;就复习一些之前学习的算法了。 复…
阅读更多...
有哪些方法可以恢复ios15不小心删除的照片？

有哪些方法可以恢复ios15不小心删除的照片？

ios15怎么恢复删除的照片&#xff1f;在手机相册里意外删除了重要的照片&#xff1f;别担心&#xff01;本文将为你介绍如何在iOS 15系统中恢复已删除的照片。无需专业知识&#xff0c;只需要按照以下步骤操作&#xff0c;你就能轻松找回宝贵的回忆。 一、从iCloud云端恢复删除…
阅读更多...
SRC公益上分的小技巧一

SRC公益上分的小技巧一

前言 之前发布的文章&#xff0c;例如SRC中的一些信息收集姿势- Track 知识社区 - 掌控安全在线教育 - Powered by 掌控者 里面就有提到若依系统&#xff0c;默认账号密码非常简单 是 admin / admin123 但是&#xff0c;往往我们去挖掘的时候很容易出现 这说明了若依系统的门…
阅读更多...
【Linux：文件描述符】

【Linux：文件描述符】

文件描述符&#xff1a; 文件描述符的分配原则&#xff1a;最小未分配原则 每一个进程中有一个task_struct结构体&#xff08;PCB)&#xff0c;而task_struct中含有struct file_sturct*file的指针&#xff0c;该指针指向了一个struct files_struct的结构体该结构体中含有一个f…
阅读更多...
三大工作流引擎技术Activiti、Flowable、Camunda选型指南

三大工作流引擎技术Activiti、Flowable、Camunda选型指南

文章目录 前言1 流程引擎发展历程2 流程引擎主要概念BPM (Business Process Management)BPMN (Business Process Model and Notation)CMMN (Case Management Model and Notation)DMN (Decision Model and Notation)事件&#xff08;Event&#xff09;顺序流&#xff08;Sequenc…
阅读更多...
用一个实例看如何分享大量照片 续篇二，关于Exif (Exchangeable Image File) - 可交换图像文件

用一个实例看如何分享大量照片 续篇二，关于Exif (Exchangeable Image File) - 可交换图像文件

续篇二&#xff1a;说说关于照片隐含的 Exif (Exchangeable Image File) 可交换图像文件 数码照片的Exif 参数有很多&#xff0c;重要的Exif信息&#xff1a;拍摄日期、时间、拍摄器材、GPS信息。 当然这主要对自己的档案有意义&#xff0c;如果放到网上还是建议抹去这些信息。…
阅读更多...
Bad owner or permissions on C:\\Users\\username/.ssh/config ＞ 过程试图写入的管道不存在。

Bad owner or permissions on C:\\Users\\username/.ssh/config ＞ 过程试图写入的管道不存在。

使用windows连接远程服务器出现Bad owner or permissions 错误 问题&#xff1a; 需要修复文件权限 SSH 配置文件应具有受限权限以防止未经授权的访问 确保只有用户对该.ssh/config文件具有读取权限 解决方案&#xff1a; 在windows下打开命令行&#xff0c;通过以下命令打开文…
阅读更多...
C++编程（四）this指针 常函数 常对象 静态成员

C++编程（四）this指针 常函数 常对象 静态成员

文章目录 一、this指针&#xff08;一&#xff09;概念&#xff08;二&#xff09;显式使用this指针的场景1. 当形参和成员变量名一致时2. 返回对象自身的时候必须要使用this指针3. 在类中销毁一个对象 二、常函数和常对象&#xff08;一&#xff09;常函数1. 概念2. 语法格式 …
阅读更多...
python OpenCV 库中的 cv2.Canny() 函数来对图像进行边缘检测，并显示检测到的边缘特征

python OpenCV 库中的 cv2.Canny() 函数来对图像进行边缘检测，并显示检测到的边缘特征

import cv2# 加载图像 image cv2.imread(4.png)# 使用 Canny 边缘检测算法提取边缘特征 edges cv2.Canny(image, 100, 200)# 显示边缘特征 cv2.imshow(Edges, edges) cv2.waitKey(0) cv2.destroyAllWindows() 代码解析&#xff1a; 导入 OpenCV 库&#xff1a; import cv2加…
阅读更多...
PT100(RTD)是什么？2线，3线，4线原理

PT100(RTD)是什么？2线，3线，4线原理

RTDs - or Resistance Temperature Detectors- (电阻式温度探测器)&#xff0c;是温度型传感器&#xff0c;包含一个电阻&#xff0c;这个阻值可以随温度的变化而变化。在工业的进程中和实验室里已经使用了很多年&#xff0c;以精确&#xff0c;可靠和稳定的特性。 2线制 2线制…
阅读更多...
C语言| 数组元素的删除

C语言| 数组元素的删除

同数组元素的插入差不多。 数组元素的插入&#xff0c;是先移动要插入元素位置后面的所有元素&#xff0c;再插入新元素&#xff0c;长度1。 C语言| 数组的插入-CSDN博客 数组元素的删除&#xff0c;是先删除元素&#xff0c;再把后面的元素往前移动一位&#xff0c;而本程序…
阅读更多...
【智能算法应用】麻雀搜索算法在物流配送中心选址的应用（无待选配送中心）

【智能算法应用】麻雀搜索算法在物流配送中心选址的应用（无待选配送中心）

目录 1.算法原理2.数学模型3.结果展示4.参考文献5.代码获取 1.算法原理 【智能算法】麻雀搜索算法&#xff08;SSA&#xff09;原理及实现 2.数学模型 模型假设 待定物流配送中心的库存总能满足需求点的需求不考虑从工厂到待定物流配送中心的运输成本不考虑选定区域内待确定…
阅读更多...
Vue 解决报错 VM6290:1 Uncaught SyntaxError: Unexpected identifier ‘Promise‘

Vue 解决报错 VM6290:1 Uncaught SyntaxError: Unexpected identifier ‘Promise‘

Vue 报错 VM6290:1 Uncaught SyntaxError: Unexpected identifier ‘Promise’ 排查 控制台报了一个错误 , Uncaught SyntaxError: Unexpected identifier ‘Promise’&#xff0c;网上查到的方法是 缺少符号&#xff0c;语法写法错误&#xff0c;但这些都没有解决我的问题&am…
阅读更多...
RTDETR更换优化器——Lion

RTDETR更换优化器——Lion

RTDETR更换Lion优化器 论文&#xff1a;https://arxiv.org/abs/2302.06675 代码&#xff1a;https://github.com/google/automl/blob/master/lion/lion_pytorch.py 简介&#xff1a; Lion优化器是一种基于梯度的优化算法&#xff0c;旨在提高梯度下降法在深度学习中的优化效果…
阅读更多...
MyBatis~配置解析, 属性（properties）、设置（settings）

MyBatis~配置解析, 属性（properties）、设置（settings）

注意, 对应的名称一定要相同, 比如username就要对应username, 而且如果同时使用外部配置文件和property, 优先级是外部配置文件优先级更高 设置&#xff08;settings&#xff09; 这是 MyBatis 中极为重要的调整设置&#xff0c;它们会改变 MyBatis 的运行时行为。 下表描述了…
阅读更多...
prompt：我是晚餐盲盒，只要你问出“今晚吃什么”我就将为你生成美妙的食物推荐。

prompt：我是晚餐盲盒，只要你问出“今晚吃什么”我就将为你生成美妙的食物推荐。

使用方法&#xff1a;在ChatGP粘贴下面提示词模型&#xff0c;点击输出。然后再问“晚餐有什么好吃的&#xff1f;”&#xff0c;AI输出丰种食物供你选择。抽到什么吃什么&#xff0c;极大的解决选择困难的问题。 客户需要生成1000条俏皮灵动&#xff0c;趣味盎然&#xff0c;比…
阅读更多...
pytest测试框架pytest-order插件自定义用例执行顺序

pytest测试框架pytest-order插件自定义用例执行顺序

pytest提供了丰富的插件来扩展其功能&#xff0c;本章介绍插件pytest-order&#xff0c;用于自定义pytest测试用例的执行顺序。pytest-order是插件pytest-ordering的一个分支&#xff0c;但是pytest-ordering已经不再维护了&#xff0c;建议大家直接使用pytest-order。 官方文…
阅读更多...
华为云安全防护，九河云综合分解优劣势分析

华为云安全防护，九河云综合分解优劣势分析

随着全球化的发展&#xff0c;越来越多的企业开始寻求在国际市场上扩展业务&#xff0c;这一趋势被称为企业出海。然而&#xff0c;企业在海外扩张面临诸多隐患与安全挑战&#xff0c;其中因为地域的不同&#xff0c;在安全性方面与国内相比会变得薄弱&#xff0c;从而导致被黑…
阅读更多...
如何在浏览器中查看网页的HTML源代码？

如何在浏览器中查看网页的HTML源代码？

如何在浏览器中查看网页的HTML源代码&#xff1f; 浏览html网页&#xff0c;查看其源代码&#xff0c;可以帮助我们了解该版网页的信息以及架构&#xff0c;每个浏览器都是允许用户查看他们访问的任何网页的HTML源代码的。以下编程狮小师妹就介绍几个常见浏览器的查看网页 HTM…
阅读更多...
mysql安装创建数据库防止踩坑

mysql安装创建数据库防止踩坑

为了安装MySQL的家人们走弯路&#xff0c;稍微有些啰嗦&#xff0c;讲述我安装的时遇到的问题&#xff0c;如何解决。仔细看看离成功不远。 mysql下载链接 MySQL :: Download MySQL Community Server windows下安装mysql-8.0.29-winx64&#xff0c;下载安装包后解压到文件夹中…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023