github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-17 14:42:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化聊天输入时页面乱滚动的情况

Browse Source
This commit is contained in:
kuaifan 2024-10-28 19:26:39 +08:00
parent 99757fc947
commit 9001c51bea
3 changed files with 38 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
resources/assets/js/functions/eeui.js vendored
View File

@ -33,16 +33,19 @@
return null; return null;
}, },
// 获取eeui版本号
eeuiAppVersion() { eeuiAppVersion() {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
return $A.eeuiModuleSync("eeui").getVersion(); return $A.eeuiModuleSync("eeui").getVersion();
}, },
// 获取本地软件版本号
eeuiAppLocalVersion() { eeuiAppLocalVersion() {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
return $A.eeuiModuleSync("eeui").getLocalVersion(); return $A.eeuiModuleSync("eeui").getLocalVersion();
}, },
// alert
eeuiAppAlert(object, callback) { eeuiAppAlert(object, callback) {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
if (typeof callback !== "function") callback = _ => {}; if (typeof callback !== "function") callback = _ => {};
@ -51,6 +54,7 @@
}) })
}, },
// toast
eeuiAppToast(object) { eeuiAppToast(object) {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
$A.eeuiModule("eeui").then(obj => { $A.eeuiModule("eeui").then(obj => {
@ -58,11 +62,13 @@
}) })
}, },
// 相对地址基于当前地址补全
eeuiAppRewriteUrl(val) { eeuiAppRewriteUrl(val) {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
return $A.eeuiModuleSync("eeui").rewriteUrl(val); return $A.eeuiModuleSync("eeui").rewriteUrl(val);
}, },
// 打开app新页面
eeuiAppOpenPage(object, callback) { eeuiAppOpenPage(object, callback) {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
if (typeof callback !== "function") callback = _ => {}; if (typeof callback !== "function") callback = _ => {};
@ -71,6 +77,7 @@
}) })
}, },
// 使用系统浏览器打开网页
eeuiAppOpenWeb(url) { eeuiAppOpenWeb(url) {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
$A.eeuiModule("eeui").then(obj => { $A.eeuiModule("eeui").then(obj => {
@ -78,6 +85,7 @@
}) })
}, },
// 拦截返回按键事件（仅支持android、iOS无效）
eeuiAppSetPageBackPressed(object, callback) { eeuiAppSetPageBackPressed(object, callback) {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
if (typeof callback !== "function") callback = _ => {}; if (typeof callback !== "function") callback = _ => {};
@ -86,6 +94,7 @@
}) })
}, },
// 返回手机桌面
eeuiAppGoDesktop() { eeuiAppGoDesktop() {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
$A.eeuiModule("eeui").then(obj => { $A.eeuiModule("eeui").then(obj => {
@ -93,6 +102,7 @@
}) })
}, },
// 打开屏幕常亮
eeuiAppKeepScreenOn() { eeuiAppKeepScreenOn() {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
$A.eeuiModule("eeui").then(obj => { $A.eeuiModule("eeui").then(obj => {
@ -100,6 +110,7 @@
}) })
}, },
// 关闭屏幕常亮
eeuiAppKeepScreenOff() { eeuiAppKeepScreenOff() {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
$A.eeuiModule("eeui").then(obj => { $A.eeuiModule("eeui").then(obj => {
@ -107,6 +118,7 @@
}) })
}, },
// 隐藏软键盘
eeuiAppKeyboardHide() { eeuiAppKeyboardHide() {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
$A.eeuiModule("eeui").then(obj => { $A.eeuiModule("eeui").then(obj => {
@ -114,6 +126,7 @@
}) })
}, },
// 给app发送消息
eeuiAppSendMessage(object) { eeuiAppSendMessage(object) {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
$A.eeuiModule("webview").then(obj => { $A.eeuiModule("webview").then(obj => {
@ -121,6 +134,7 @@
}) })
}, },
// 设置浏览器地址
eeuiAppSetUrl(url) { eeuiAppSetUrl(url) {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
$A.eeuiModule("webview").then(obj => { $A.eeuiModule("webview").then(obj => {
@ -128,6 +142,7 @@
}) })
}, },
// 扫码
eeuiAppScan(callback) { eeuiAppScan(callback) {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
$A.eeuiModule("eeui").then(obj => { $A.eeuiModule("eeui").then(obj => {
@ -141,26 +156,31 @@
}) })
}, },
// 获取主题名称 light|dark
eeuiAppGetThemeName() { eeuiAppGetThemeName() {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
return $A.eeuiModuleSync("eeui").getThemeName(); return $A.eeuiModuleSync("eeui").getThemeName();
}, },
// 判断软键盘是否可见
eeuiAppKeyboardStatus() { eeuiAppKeyboardStatus() {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
return $A.eeuiModuleSync("eeui").keyboardStatus(); return $A.eeuiModuleSync("eeui").keyboardStatus();
}, },
// 设置全局变量
eeuiAppSetVariate(key, value) { eeuiAppSetVariate(key, value) {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
$A.eeuiModuleSync("eeui").setVariate(key, value); $A.eeuiModuleSync("eeui").setVariate(key, value);
}, },
// 长按内容震动（仅支持android、iOS无效）
eeuiAppSetHapticBackEnabled(val) { eeuiAppSetHapticBackEnabled(val) {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
$A.eeuiModuleSync("webview").setHapticBackEnabled(val); $A.eeuiModuleSync("webview").setHapticBackEnabled(val);
}, },
// 禁止长按选择（仅支持android、iOS无效）
eeuiAppSetDisabledUserLongClickSelect(val) { eeuiAppSetDisabledUserLongClickSelect(val) {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
$A.__disabledUserLongClickSelectTimer && clearTimeout($A.__disabledUserLongClickSelectTimer); $A.__disabledUserLongClickSelectTimer && clearTimeout($A.__disabledUserLongClickSelectTimer);
@ -176,10 +196,19 @@
}, },
__disabledUserLongClickSelectTimer: null, __disabledUserLongClickSelectTimer: null,
// 复制文本
eeuiAppCopyText(text) { eeuiAppCopyText(text) {
if (!$A.isEEUiApp) return; if (!$A.isEEUiApp) return;
$A.eeuiModuleSync("eeui").copyText(text) $A.eeuiModuleSync("eeui").copyText(text)
}, },
// 设置是否允许滚动
eeuiAppSetScrollEnabled(enabled) {
if (!$A.isEEUiApp) return;
$A.eeuiModule("webview").then(obj => {
obj.setScrollEnabled(enabled);
})
},
}); });
window.$A = $; window.$A = $;

6
resources/assets/js/pages/manage/components/DialogModal.vue
View File

@ -65,6 +65,12 @@ export default {
} }
}, },
watch: {
visible(v) {
$A.eeuiAppSetScrollEnabled(!v)
}
},
methods: { methods: {
onBeforeClose() { onBeforeClose() {
return new Promise(_ => { return new Promise(_ => {

71
resources/assets/js/pages/manage/components/DialogWrapper.vue
View File

@ -7,8 +7,6 @@
@dragover.prevent="chatDragOver(true, $event)" @dragover.prevent="chatDragOver(true, $event)"
@dragleave.prevent="chatDragOver(false, $event)" @dragleave.prevent="chatDragOver(false, $event)"
@touchstart="onTouchStart" @touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
@pointerover="onPointerover"> @pointerover="onPointerover">
<!--顶部导航--> <!--顶部导航-->
<div ref="nav" class="dialog-nav"> <div ref="nav" class="dialog-nav">
@ -780,7 +778,6 @@ export default {
operateItem: {}, operateItem: {},
recordState: '', recordState: '',
wrapperStart: null,
pointerMouse: false, pointerMouse: false,
scrollTail: 0, scrollTail: 0,
@ -830,7 +827,6 @@ export default {
positionShow: false, // 定位跳转显示 positionShow: false, // 定位跳转显示
preventMoreLoad: false, // 阻止加载更多 preventMoreLoad: false, // 阻止加载更多
preventToBottom: false, // 阻止滚动到底部 preventToBottom: false, // 阻止滚动到底部
selectedTextStatus: false, // 是否选择文本
scrollToBottomRefresh: false, // 滚动到底部重新获取消息 scrollToBottomRefresh: false, // 滚动到底部重新获取消息
androidKeyboardVisible: false, // Android键盘是否可见 androidKeyboardVisible: false, // Android键盘是否可见
replyMsgAutoMention: false, // 允许回复消息后自动@ replyMsgAutoMention: false, // 允许回复消息后自动@
@ -840,7 +836,6 @@ export default {
mounted() { mounted() {
this.subMsgListener() this.subMsgListener()
this.msgSubscribe = Store.subscribe('dialogMsgChange', this.onMsgChange); this.msgSubscribe = Store.subscribe('dialogMsgChange', this.onMsgChange);
document.addEventListener('selectionchange', this.onSelectionchange);
}, },
beforeDestroy() { beforeDestroy() {
@ -858,8 +853,6 @@ export default {
this.observers.forEach(({observer}) => observer.disconnect()) this.observers.forEach(({observer}) => observer.disconnect())
this.observers = [] this.observers = []
// //
document.removeEventListener('selectionchange', this.onSelectionchange);
//
const scroller = this.$refs.scroller; const scroller = this.$refs.scroller;
if (scroller) { if (scroller) {
scroller.virtual.destroy() scroller.virtual.destroy()
@ -1781,11 +1774,6 @@ export default {
} }
}, },
onSelectionchange() {
const selectionType = window.getSelection().type;
this.selectedTextStatus = selectionType === "Range"
},
getTempId() { getTempId() {
return this.tempId++ return this.tempId++
}, },
@ -2023,64 +2011,11 @@ export default {
} }
}, },
onTouchStart(e) { onTouchStart() {
if ($A.isAndroid() && $A.eeuiAppKeyboardStatus()) { // Android 阻止长按反馈导致失去焦点页面抖动
if (this.androidKeyboardVisible) {
$A.eeuiAppSetDisabledUserLongClickSelect(500); $A.eeuiAppSetDisabledUserLongClickSelect(500);
} }
this.wrapperStart = null;
if (this.selectedTextStatus) {
this.wrapperStart = window.scrollY
return
}
if (this.$refs.scroller.$el.contains(e.target)) {
// 聊天内容区域
this.wrapperStart = Object.assign(this.scrollInfo(), {
clientY: e.touches[0].clientY,
});
} else if (this.$refs.input.$refs.editor.contains(e.target)) {
// 输入内容区域
const editor = this.$refs.input.$refs.editor.querySelector(".ql-editor");
if (editor) {
const clientSize = editor.clientHeight;
const offset = editor.scrollTop;
const scrollSize = editor.scrollHeight;
this.wrapperStart = {
offset, // 滚动的距离
scale: offset / (scrollSize - clientSize), // 已滚动比例
tail: scrollSize - clientSize - offset, // 与底部距离
clientY: e.touches[0].clientY,
}
}
}
},
onTouchMove(e) {
if (this.footerPaddingBottom > 0 || (this.windowPortrait && this.windowScrollY > 0)) {
if (typeof this.wrapperStart === 'number') {
return;
}
if (this.wrapperStart === null) {
e.preventDefault();
return;
}
if (this.wrapperStart.clientY > e.touches[0].clientY) {
// 向上滑动
if (this.wrapperStart.tail === 0) {
e.preventDefault();
}
} else {
// 向下滑动
if (this.wrapperStart.offset === 0) {
e.preventDefault();
}
}
}
},
onTouchEnd() {
if (typeof this.wrapperStart === 'number' && $A.isIos()) {
$A.scrollToView(this.$refs.footer, false)
}
}, },
onPointerover({pointerType}) { onPointerover({pointerType}) {