首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Shopify admin内的嵌入式应用程序的页面之间添加加载指示器的最简单方法是什么?

在Shopify admin内的嵌入式应用程序的页面之间添加加载指示器的最简单方法是使用Shopify Polaris框架中提供的Spinner组件。Spinner组件可以显示一个旋转的加载指示器,以告知用户页面正在加载中。

要在嵌入式应用程序的页面中添加Spinner组件,可以按照以下步骤进行操作:

  1. 在应用程序的前端代码中引入Shopify Polaris框架。可以通过在HTML文件中添加以下代码来引入Polaris框架的样式和JavaScript文件:
代码语言:txt
复制
<link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/5.10.0/polaris.min.css" />
<script src="https://sdks.shopifycdn.com/polaris/5.10.0/polaris.min.js"></script>
  1. 在需要显示加载指示器的页面中,使用Spinner组件的HTML标签。可以在页面的合适位置添加以下代码:
代码语言:txt
复制
<div class="spinner-container">
  <div class="spinner"></div>
</div>
  1. 使用CSS样式来定义Spinner组件的外观。可以在CSS文件中添加以下代码:
代码语言:txt
复制
.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

以上代码定义了一个居中显示的容器和一个旋转的圆形加载指示器。

  1. 当页面加载完成后,使用JavaScript代码隐藏Spinner组件。可以在页面加载完成的事件处理函数中添加以下代码:
代码语言:txt
复制
document.addEventListener("DOMContentLoaded", function() {
  var spinnerContainer = document.querySelector(".spinner-container");
  spinnerContainer.style.display = "none";
});

以上代码会在页面加载完成后将Spinner组件的容器隐藏起来。

通过以上步骤,就可以在Shopify admin内的嵌入式应用程序的页面之间添加加载指示器。用户在页面加载过程中会看到一个旋转的加载指示器,以提醒他们页面正在加载中。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券