health.applet/miniprogram/module/chats/pages/index/index.ts

import dayjs from "dayjs";
import PageContainerBehavior from "../../../../core/behavior/page-container.behavior";

// module/chats/pages/index/index.ts
interface ScrollIntoViewEvent {
  detail: string;
}
interface HandleEvent {
  detail: { component: "guide" | "questionnaire"; scroll?: boolean };
}
interface NextTypeEvent {
  detail: { messageType: number };
}
interface Message extends Omit<HandleEvent["detail"], "scroll"> {
  id: string;
}

function getScrollcontext(this: any) {
  return this as {
    scroll: WechatMiniprogram.ScrollViewContext;
    timer: number;
  };
}

Component({
  behaviors: [PageContainerBehavior],
  lifetimes: {
    attached() {
      this.setData({
        date: dayjs().format("MM-DD HH:mm:ss"),
      });
      const component = this.data.component as "guide" | "questionnaire";
      this.handle({ detail: { component, scroll: true } });
      // 计算底部bottom
      const systemInfo = wx.getSystemInfoSync();
      const windowHeight = systemInfo.windowHeight;
      const safeAreaBottom = systemInfo.safeArea?.bottom ?? windowHeight; // 没有safeArea时，bottom等于windowHeight
      const safeBottom = windowHeight - safeAreaBottom; // 安全区底部距离（px）
      const safeBottomRpx = (750 / systemInfo.windowWidth) * safeBottom; // rpx
      console.log(safeBottom, "safeBottom");
      // const tabbarHeight = 40; // 你的tabbar高度，单位px（如80rpx转px，或直接用rpx）
      // let paddingBottom = tabbarHeight + safeBottom;
      this.setData({
        paddingBottom: this.data.paddingBottom+safeBottomRpx,
      });
      console.log(this.data.paddingBottom, "paddingBottom");
    },
    ready() {
      wx.createSelectorQuery()
        .select("#scrollview")
        .node()
        .exec((res) => {
          getScrollcontext.call(this).scroll = res[0].node;
        });
    },
  },
  properties: {
    component: { type: String, value: "guide" },
    messageType: { type: Number, value: 0 },
    isShowGuide: { type: Boolean, value: false },
    id: { type: Number, value: 0 },
  },
  data: {
    date: "",
    messages: {} as Record<number, Message>,
    lastId: "",
    inputBoxBottom: 0,
    tabbarValue: "/module/chats/pages/index/index",
    analysisCount: 0,
    paddingBottom: 100,  // 底部tabbar高度是100
  },
  observers: {
    "messages.**"(messages) {
      const message = Object.values(messages).pop() as Message;
      this.setData({ lastId: message?.id });
    },
    // calc(100rpx + env(safe-area-inset-bottom))
  },
  methods: {
    boxBottom(event: boxBottom) {
      console.log(event.detail.inputBoxBottom, "监听页面index高度boxbottom");
      this.setData({
        inputBoxBottom: event.detail.inputBoxBottom,
      });
      // const bottom=this.data.paddingBottom;
      this.setData({
        paddingBottom: event.detail.inputBoxBottom,
      });
      console.log(this.data.inputBoxBottom, "监听页面index高度boxbottom");
    },
    nextType(event: NextTypeEvent) {
      this.setData({ messageType: event.detail.MessageType });
    },
    getCount(event: GetCountEvent) {
      this.setData({ analysisCount: event.detail.analysisCount });
      console.log(this.data.analysisCount, "监听页面index高度getCount");
    },
    handle(event: HandleEvent) {
      const index = Object.keys(this.data.messages).length;
      this.setData({
        [`messages.${index}`]: <Message>{
          id: `${this.is.replace(/\//g, "_")}-${index}`,
          component: event.detail?.component,
        },
      });
      if (event.detail?.scroll) this.scrollIntoView();
    },
    scrollIntoView(event?: ScrollIntoViewEvent) {
      console.log(event, "index-scrollIntoView");
      clearTimeout(getScrollcontext.call(this).timer);
      const id = event?.detail ?? this.data.lastId;
      console.log(id, "index-scrollIntoView");

      getScrollcontext.call(this).timer = setTimeout(() => {
        const scroll = getScrollcontext
          .call(this)
          .scroll;

        if(id === "bottom"){
          scroll?.scrollTo({
            top: Number.MAX_SAFE_INTEGER,
            animated: true
           })
        }else{
          scroll?.scrollIntoView(`#${id}`, { alignment: "end" });
        }
      }, 300);
    },
  },
});