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) {
      // console.log(event,"bind:tap=onBodyModel")
      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) {
          // if(rects.length > 0 && rects[0] && rects[0].height){
          //     rects[0].height = rects[0].height + 30; 
          // }
          // console.log("rects", rects);
          rects.forEach((rect:any, i:number) => {
            // rect[0].height = rect[0].height + 30;
            // console.log("rect1111", rect);
            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));
              // console.log("count", count);
              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();
    }
  }
})