health.applet/miniprogram/pages/home/vertical-steps/index.ts

Component({
  properties: {
    statusList: {
      type: Array,
      value: [],
    },
    dataset: { type: Object },
  },

  data: {
    dashedCounts: [],
  },

  lifetimes: {
    ready() {
      this.calcAllDashes();
    },
  },

  methods: {
    onBodyModel(event: any) {
      const position = event.mark?.position;
      if (position) this.triggerEvent("position", { position });
    },
    calcAllDashes() {
      const query = wx.createSelectorQuery().in(this);
      const dashedCounts: any[] = [];
      const itemCount = this.data.statusList.length;
      const systemInfo = wx.getSystemInfoSync();
      const rpx2px = systemInfo.windowWidth / 750;
      for (let i = 0; i < itemCount; i++) {
        query.select(`#item-${i}`).boundingClientRect();
      }
      query.exec((rects) => {
        if (rects) {
          rects.forEach((rect: any, i: number) => {
            if (rect) {
              // 换算成 rpx
              const heightRpx = rect.height / rpx2px;
              // 14rpx为圆圈高度
              const lineHeight = heightRpx - 14;
              const dashHeight = 10;
              const gap = 4;
              let count = Math.floor(lineHeight / (dashHeight + gap));
              if (count < 1) count = 1;
              dashedCounts[i] = Array.from({ length: count }, (_, j) => j);
            } else {
              dashedCounts[i] = Array.from({ length: 10 }, (_, j) => j);
            }
          });
          this.setData({ dashedCounts });
        }
      });
    },
  },

  observers: {
    statusList: function () {
      this.calcAllDashes();
    },
  },
});