init

miniprogram/components/infinite-scroll/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

miniprogram/components/infinite-scroll/index.scss

@@ -0,0 +1 @@
+/* components/infinite-scroll/index.wxss */

miniprogram/components/infinite-scroll/index.ts

@@ -0,0 +1,44 @@
+// components/infinite-scroll/index.ts
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {},
+
+  /**
+   * 组件的初始数据
+   */
+  data: {},
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {},
+  lifetimes: {
+    attached() {
+      //@ts-ignore
+      this._observer = wx.createIntersectionObserver(this);
+      //@ts-ignore
+      this._observer
+        // .createIntersectionObserver()
+        .relativeToViewport({ bottom: 100 })
+        .observe(".load-more", (res: any) => {
+          console.log(res);
+          res.intersectionRatio; // 相交区域占目标节点的布局区域的比例
+          res.intersectionRect; // 相交区域
+          res.intersectionRect.left; // 相交区域的左边界坐标
+          res.intersectionRect.top; // 相交区域的上边界坐标
+          res.intersectionRect.width; // 相交区域的宽度
+          res.intersectionRect.height; // 相交区域的高度
+        });
+      // //@ts-ignore
+      // this._observer = wx.createIntersectionObserver(this);
+
+      // //@ts-ignore
+      // this._observer.relativeTo(".scroll-view").observe(".load-more", (res) => {
+      //   console.log("到底了");
+      //   this.triggerEvent("loadmore", {}, {});
+      // });
+    },
+  },
+});

miniprogram/components/infinite-scroll/index.wxml

@@ -0,0 +1,5 @@
+<!--components/infinite-scroll/index.wxml-->
+<view>
+  <slot></slot>
+  <view class="load-more">load more</view>
+</view>

miniprogram/components/statistics-card/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

miniprogram/components/statistics-card/index.scss

@@ -0,0 +1,28 @@
+/* components/statistics-card/index.wxss */
+.statistcs-card {
+  display: flex;
+  justify-content: space-between;
+  border-radius: 16rpx;
+  margin: 0 32rpx;
+  background-color: #fff;
+  padding: 32rpx 0;
+  .statistcs-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    &:not(:last-child) {
+      border-right: 1px solid #eee;
+    }
+    .value {
+      color: #0052d9;
+      font-size: larger;
+      font-weight: bold;
+    }
+    .title {
+      margin-top: 6rpx;
+      color: #555;
+      font-size: small;
+    }
+  }
+}

miniprogram/components/statistics-card/index.ts

@@ -0,0 +1,21 @@
+// components/statistics-card/index.ts
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    statisticsData: {
+      type: Object,
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {},
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {},
+});

miniprogram/components/statistics-card/index.wxml

@@ -0,0 +1,7 @@
+<!--components/statistics-card/index.wxml-->
+<view class="statistcs-card">
+  <view wx:for="{{statisticsData}}" wx:key="key" wx:for-item="value" class="statistcs-item">
+    <view class="value">{{value.value}}</view>
+    <view class="title">{{value.label}}</view>
+  </view>
+</view>