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;
}
});