通过微信开发者工具 商城模板 创建新小程序

mini-program/components/loading-content/index.js

@@ -0,0 +1,23 @@
+Component({
+  externalClasses: ['wr-class'],
+  properties: {
+    position: {
+      type: String,
+      value: 'static',
+    },
+    noMask: Boolean,
+    type: {
+      type: String,
+      value: 'circular',
+    },
+    vertical: Boolean,
+    size: {
+      type: String,
+      value: '50rpx',
+    },
+    backgroundColor: {
+      type: String,
+      value: 'rgba(0, 0, 0, .6)',
+    },
+  },
+});

mini-program/components/loading-content/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-loading": "tdesign-miniprogram/loading/loading"
+  }
+}

mini-program/components/loading-content/index.wxml

@@ -0,0 +1,11 @@
+<view class="t-class loading-content {{position}}" style="{{(position === 'static' || noMask) ? 'visibility: hidden;' : ''}} background-color: {{backgroundColor}}">
+	<t-loading
+	 t-class="loading"
+	 theme="{{type}}"
+	 layout="{{vertical}}"
+	 size="{{size}}"
+	>
+		<slot/>
+	</t-loading>
+</view>
+

mini-program/components/loading-content/index.wxss

@@ -0,0 +1,23 @@
+.loading-content {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  position: relative;
+}
+.loading-content.absolute {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+}
+.loading-content.fixed {
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+}
+.loading-content .loading {
+  width: 100%;
+  height: 100%;
+  visibility: visible;
+}