加载

Loading（加载）是一个用于显示全局加载状态的组件，通过在 SHOPLINE 商家后台页面顶部显示进度条动画，向商家传达应用正在处理请求或加载数据。它能有效管理预期，让商家了解应用的响应状态，避免因等待而产生不确定感。

快速开始​

以下示例展示了加载组件的基本实现方式：

import Client, { Loading, shared } from '@shoplineos/app-bridge';
// 1. 初始化 App Bridge
const app = Client.createApp({
  appKey: 'your-app-key',
  host: shared.getHost(),
});
// 2. 创建 Loading 实例
const loading = Loading.create(app);
// 3. 显示加载状态
loading.set(true);
setTimeout(() => {
  loading.set(false);
}, 2000);

当执行 set(true) 后，会在页面顶部显示加载进度条，效果如下：

image.png

API 方法​

set()​

(isLoading: boolean): void

设置加载状态。

参数​

参数类型说明必填
isLoadingboolean是否显示加载状态。
  • true：显示加载状态。
  • false：隐藏加载状态。
是

使用示例​

// 显示加载状态
loading.set(true);
// 隐藏加载状态
loading.set(false);

get()​

(): boolean

获取当前加载状态。

返回值​

返回 true 表示显示加载状态，false 表示未显示加载状态。

提示

当调用 set()、toggle() 或旧方法 trigger()、exit() 时，Loading 实例会自动更新加载状态，以便应用侧准确判断当前是否正在加载。

使用示例​

// 检查当前加载状态
if (loading.get()) {
  console.log('正在加载中...');
} else {
  console.log('加载已完成');
}

toggle()​

(): void

切换加载状态（显示或隐藏）。

使用示例​

// 切换加载状态
loading.toggle();

trigger()​

(): void

开始显示加载状态。

废弃

trigger() 方法已被标记为废弃。编写新代码时，建议使用 set(true) 显示加载状态。

使用示例​

// 显示加载状态
loading.trigger();

exit()​

(): void

结束并隐藏加载状态。

废弃

exit() 方法已被标记为废弃。编写新代码时，建议使用 set(false) 隐藏加载状态。

使用示例​

// 隐藏加载状态
loading.exit();

使用示例​

示例 1：数据加载​

import Client, { Loading, shared } from '@shoplineos/app-bridge';
const app = Client.createApp({
  appKey: 'your-app-key',
  host: shared.getHost(),
});
const loading = Loading.create(app);
// 加载商品数据
const fetchProducts = async () => {
  // 显示加载状态
  loading.set(true);
  try {
    const response = await fetch('/api/products');
    const products = await response.json();
    // 处理数据
    console.log('商品数据:', products);
  } catch (error) {
    console.error('加载失败:', error);
  } finally {
    loading.set(false);
  }
};
fetchProducts();

示例 2：表单保存​

const handleSave = async (formData) => {
  // 显示加载状态
  loading.set(true);
  try {
    // 提交表单数据
    await saveProduct(formData);
    // 保存成功
    console.log('保存成功');
  } catch (error) {
    // 保存失败
    console.error('保存失败:', error);
  } finally {
    // 隐藏加载状态
    loading.set(false);
  }
};
这篇文章对你有帮助吗？
SHOPLINE
SHOPLINE
SHOPLINE Enterprise
条款协议
隐私
条款
开发者协议
LinkedInEmail
LinkedInEmail
© Copyright 2013-2026 SHOPLINE Limited.