apicloud uilistview 获取uid

APICloud UIListView 获取 uid 详细指南

核心概念

UIListView 简介

• 定义：APICloud 的 UIListView 是用于展示垂直/水平滚动列表的组件，支持数据绑定、滑动删除、点击事件等功能。
• 核心属性：data（数据源）、template（渲染模板）、uid（唯一标识符）。

uid 的作用

• 唯一标识：每个列表项（item）的 uid 用于区分不同数据项，常用于事件回调中定位具体项。
• 数据关联：uid 通常与数据源中的字段绑定，确保视图层与数据层的一致性。

实现步骤

准备数据源（含 uid）

// 示例数据源，每个 item 必须包含 uid 字段
let listData = [
  { uid: 'item1', name: '张三', age: 25 },
  { uid: 'item2', name: '李四', age: 30 },
  { uid: 'item3', name: '王五', age: 28 }
];

初始化 UIListView

<!-app.json 配置 -->
{
  "widget": {
    "id": "main",
    "name": "uilistview-demo",
    "frame": { x: 0, y: 0, width: 750, height: 1334 },
    "backgroundColor": "#ffffff"
  },
  "UIListView": {
    "data": [], // 初始数据为空，后续动态赋值
    "template": {
      "type": "base",
      "layout": {
        "type": "vertical",
        "align": "center",
        "spacing": 20,
        "padding": 20,
        "bgColor": "#ffffff"
      },
      "elements": [
        {
          "id": "name",
          "type": "text",
          "props": {
            "text": "{name}",
            "fontSize": 28,
            "color": "#333333"
          }
        },
        {
          "id": "age",
          "type": "text",
          "props": {
            "text": "年龄：{age}",
            "fontSize": 24,
            "color": "#666666"
          }
        }
      ]
    }
  }
}

绑定数据并监听事件

// 页面脚本（index.js）
apiready = () => {
  const listView = api.require('UIListView');
  const listId = 'main'; // 对应 app.json 中的 widget id
  // 1. 设置数据源
  listView.setData({
    name: listId,
    data: listData // 传入含 uid 的数据源
  });
  // 2. 监听点击事件（获取点击项的 uid）
  listView.addEventListener({
    name: 'itemClick',
    handler: (event) => {
      const clickedItem = event.item; // 获取点击项的数据对象
      console.log('点击项的 uid:', clickedItem.uid);
      // 可进一步处理，如跳转页面或修改数据
    }
  });
};

关键方法与参数说明

常见问题与解答

问题1：如何动态修改某个 item 的 uid？

解答：
直接修改数据源中对应项的 uid，然后调用 updateData 方法刷新列表。

// 找到目标项并修改 uid
let targetIndex = listData.findIndex(item => item.uid === 'item1');
if (targetIndex !== -1) {
  listData[targetIndex].uid = 'new_item1'; // 修改 uid
  listView.updateData({ name: 'main', data: listData }); // 更新视图
}

问题2：在滑动删除事件中如何获取被删除项的 uid？

解答：
监听 slide 事件，通过 event.item.uid 获取被操作项的 uid。

listView.addEventListener({
  name: 'slide',
  handler: (event) => {
    const deletedUid = event.item.uid; // 获取被删除项的 uid
    console.log('删除项的 uid:', deletedUid);
    // 可在此处执行删除逻辑，如更新数据源
  }
});

小伙伴们，上文介绍了“apicloud uilistview 获取uid”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。