fix(widget): 修复分页切换时滚动位置未重置的问题
修改 store 订阅回调,增加 prevState 参数以检测页面变化。当检测到分页页码变更时,自动平滑滚动至评论区域顶部,提升用户体验。
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user