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>