fix(widget): 修复分页切换时滚动位置未重置的问题

修改 store 订阅回调,增加 prevState 参数以检测页面变化。当检测到分页页码变更时,自动平滑滚动至评论区域顶部,提升用户体验。
This commit is contained in:
anghunk
2026-01-28 13:58:34 +08:00
parent 176fd026cd
commit 1a6a93b8c5

View File

@@ -179,8 +179,8 @@ export class CWDComments {
typeof api.likeComment === 'function' ? api.likeComment.bind(api) : undefined,
);
this.unsubscribe = this.store.store.subscribe((state) => {
this._onStateChange(state);
this.unsubscribe = this.store.store.subscribe((state, prevState) => {
this._onStateChange(state, prevState);
});
this._render();
@@ -496,6 +496,17 @@ export class CWDComments {
currentUser: state.form,
});
}
const pageChanged =
prevState &&
prevState.pagination &&
state &&
state.pagination &&
state.pagination.page !== prevState.pagination.page;
if (pageChanged) {
this._scrollToCommentsTop();
}
}
/**
@@ -553,8 +564,8 @@ export class CWDComments {
this.store = createCommentStore(this.config, api.fetchComments.bind(api), api.submitComment.bind(api));
this.unsubscribe = this.store.store.subscribe((state) => {
this._onStateChange(state);
this.unsubscribe = this.store.store.subscribe((state, prevState) => {
this._onStateChange(state, prevState);
});
this.store.loadComments();
@@ -562,6 +573,17 @@ export class CWDComments {
this._applyCustomCss();
}
_scrollToCommentsTop() {
if (typeof window === 'undefined') {
return;
}
const target = this.hostElement || this.mountPoint;
if (!target || typeof target.scrollIntoView !== 'function') {
return;
}
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
_applyCustomCss() {
if (!this.shadowRoot) {
return;