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,
|
typeof api.likeComment === 'function' ? api.likeComment.bind(api) : undefined,
|
||||||
);
|
);
|
||||||
|
|
||||||
this.unsubscribe = this.store.store.subscribe((state) => {
|
this.unsubscribe = this.store.store.subscribe((state, prevState) => {
|
||||||
this._onStateChange(state);
|
this._onStateChange(state, prevState);
|
||||||
});
|
});
|
||||||
|
|
||||||
this._render();
|
this._render();
|
||||||
@@ -496,6 +496,17 @@ export class CWDComments {
|
|||||||
currentUser: state.form,
|
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.store = createCommentStore(this.config, api.fetchComments.bind(api), api.submitComment.bind(api));
|
||||||
|
|
||||||
this.unsubscribe = this.store.store.subscribe((state) => {
|
this.unsubscribe = this.store.store.subscribe((state, prevState) => {
|
||||||
this._onStateChange(state);
|
this._onStateChange(state, prevState);
|
||||||
});
|
});
|
||||||
|
|
||||||
this.store.loadComments();
|
this.store.loadComments();
|
||||||
@@ -562,6 +573,17 @@ export class CWDComments {
|
|||||||
this._applyCustomCss();
|
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() {
|
_applyCustomCss() {
|
||||||
if (!this.shadowRoot) {
|
if (!this.shadowRoot) {
|
||||||
return;
|
return;
|
||||||
|
|||||||
Reference in New Issue
Block a user