vue3 ios环境下移动端表头不固定问题

原创于 2024-07-22 14:58:22 发布 · 358 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue3移动端表头不固定问题

移动端底部按钮不随着软键盘滚动代码如下：

//表头位置固定但 会 弹跳可下载 插件 固定
import inobounce from "inobounce";
  let u = navigator.userAgent;
    if (u.indexOf("iPhone") > -1) {
      inobounce.enable();
    }

//表头位置固定设置
  function handleScroll(event) {
      let header = document.getElementsByClassName("header")[0];
      // console.log("header1:", header);
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (list.datalist.length == 0) {
        let chatContent = document.getElementsByClassName("chatContent")[0];
        chatContent.style.overflow = "hidden !important;";
        chatContent.style.height =
          window.document.clientHeight + "px !important";
        header.style.top = scrollTop + "px";
      } else {
        header.style.top = scrollTop + "px";
      }
    }
    //键盘收起弹出代码
 function getKeyboardState() {
      list.monitorKeyboard = new MonitorKeyboard();
      list.monitorKeyboard.onStart();

      // 监听虚拟键盘弹出事件
      list.monitorKeyboard.onShow(() => {
        // console.log("键盘弹出");
        // console.log("3333");
      });

      //监听键盘收起的事件
      list.monitorKeyboard.onHidden(() => {
        // console.log("键盘收起");
        // if (list.inpValue != "") {
        //   btnSend();
        // }
      });
    }
    function handleKeyboardShow() {
    
      if (window.innerHeight > document.documentElement.clientHeight) {
        // 禁用滚动
        document.body.style.overflow = "hidden";
      } else {
        // 恢复滚动
        document.body.style.overflow = "";
      }
    }

  onMounted(() => {
      getKeyboardState();
      // 添加键盘弹出事件的监听
      window.addEventListener("keyboardWillShow", keyboardWillShowHandler);
      // 监听键盘弹出事件
      window.addEventListener("resize", handleKeyboardShow);
      // // 初始化时检查一次;
      // nextTick(checkKeyboard);
      // 使header 表头位置固定
      window.addEventListener("scroll", handleScroll);
      // }
      var u = navigator.userAgent;
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isiOS) {
        list.isShow = true;
      }
    });