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

.陌路2024-07-03 0:35

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：可自定的高扩展的 懒加载机制，优化长列表提升渲染效率，提高用户体验。

html 复制代码 
<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-list
    v-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：可自定的高扩展的 懒加载机制，优化长列表提升渲染效率，提高用户体验。

html 复制代码 
<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-list
    v-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 - -（过时，后续将剔除）
。。。。。。 - -
相关推荐
Yaml47 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
尚梦7 小时前
uni-app 封装刘海状态栏（适用小程序， h5, 头条小程序）
前端·小程序·uni-app
清灵xmf10 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
paopaokaka_luck11 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
尚学教辅学习资料14 小时前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie23414 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
蜕变菜鸟14 小时前
小程序跳转另一个小程序
小程序
待17 小时前
躺平成长-代码开发，利用kimi开发小程序（09）
小程序
待20 小时前
微信小程序运营日记（第四天）
微信小程序·小程序
guanpinkeji20 小时前
旧衣回收小程序：提高回收效率，扩大服务范围
大数据·小程序·团队开发·软件开发·小程序开发·旧衣回收·旧衣回收小程序
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play