ml-list

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

ml-list介紹

1、ml-list 列表組件，包含基本列表樣式、可擴展插槽機制、長列表性能優化、多端兼容。
2、ml-list 低代碼列表，幫助使用者快速構建列表，簡單配置，快速上手。
3、支持自定義懶加載，優化長列表渲染性能，提升視圖渲染效率.

安裝方式

本組件符合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

屬性名	類型	默認值	可選值	說明	是否必填
column	Number	2	1	列表顯示列表數，1-單列表，2-雙列表	否
imageWidth	String	-	-	列表中圖片展示的寬度	否
showMore	Boolean	true	false	是否顯示 loadMore 加載更多組件	否
maxLines	Number	2 | 4	-	文本展示行數，超出指定行數則顯示…	否
noMore	Boolean	false	true	是否沒有更多數據，默認false，當為 true時，不再觸發 loadMore 去加載數據	否
itemSlot	Boolean	false	true	是否使用自定義插槽，默認false，當為true時，默認組件將不在展示	否
stytle	Object	{}	-	自定義樣式，需要使用 Object 的形式	否
list	Array	[]	-	數據列表	是
showListIndex	Number	0	-	懶加載機制，可視界面下渲染的列表數量，用于優化 大量數據下的列表渲染，提高性能，注意，使用showListIndex時一定要調用refreshList()方法刷新整個視圖，否則后面的數據將不會展示	否

list[option]【組件配置項】

屬性名	類型	默認值	可選值	說明	是否必填
title	String	-	-	名稱	是
url	String	-	-	圖片	是
…	Any	-	-	其他自定義參數，點擊后盡數返回	-

事件 Events

事件名	返回參數	說明
@rowClick	（row, index）	當點擊了列表時，觸發該rowClick事件，并返回當前點擊的數據和索引
@loadMore	-	-（過時，后續將剔除）推薦使用onReachBottom來自定義觸底加載更多
@refresh	-	-（過時，后續將剔除）推薦使用onPullDownRefresh來自定義刷新事件

組件方法 methods

方法名	參數	說明
stopRefresh	-	-（過時，后續將剔除）
。。。。。。	-	-