fix(merch/detail): 修复商户描述展开后滚动收起位置异常的问题

通过 key 强制重新渲染描述区域,重置滚动位置。合并重复的 toggleDesc 方法。

Sources:
- 61243b8 feat(merch/detail): add scroll hint for long product description
This commit is contained in:
2026-05-30 16:56:16 +08:00
parent 61243b8dd4
commit f58a6723de

View File

@@ -24,12 +24,12 @@
<text class="icox icox-xing"></text> <text class="icox icox-xing"></text>
</view> </view>
<view class="desc-wrap"> <view class="desc-wrap">
<view class="desc-text" :class="{ 'desc-expanded': isDescExpanded }" @click="toggleDesc"> <view class="desc-text" :key="descKey" :class="{ 'desc-expanded': isDescExpanded }" @click="toggleDesc">
<view>{{ merch.desc }}</view> <view class="scroll-desc">{{ merch.desc }}</view>
<view class="scroll-hint" v-if="isShowScrollHint"> <view class="scroll-hint" v-if="isShowScrollHint">
<text class="scroll-icon">↓</text> <text class="scroll-icon">↓</text>
<text class="scroll-text">上滑查看更多</text> <text class="scroll-text">上滑查看更多</text>
</view> </view>
</view> </view>
<view class="expand-tip" v-if="merch.desc && merch.desc.length > 50" @click.stop="toggleDesc"> <view class="expand-tip" v-if="merch.desc && merch.desc.length > 50" @click.stop="toggleDesc">
<text class="hint-arrow">{{ isDescExpanded ? '↑ 收起' : '↓ 展开' }}</text> <text class="hint-arrow">{{ isDescExpanded ? '↑ 收起' : '↓ 展开' }}</text>
@@ -336,7 +336,8 @@ export default {
changeStyleDebounce: null, changeStyleDebounce: null,
headerHeightInited: false, headerHeightInited: false,
isDescExpanded: false, isDescExpanded: false,
isShowScrollHint: false isShowScrollHint: false,
descKey: 0
}; };
}, },
mixins: [list], mixins: [list],
@@ -360,22 +361,22 @@ export default {
}); });
}, },
toggleDesc() { toggleDesc() {
if (this.merch.desc) {
this.isDescExpanded = !this.isDescExpanded;
}
},
handleDescClick() {
if (!this.merch.desc) return; if (!this.merch.desc) return;
this.isDescExpanded = !this.isDescExpanded;
}, if (this.isDescExpanded) {
toggleDesc() { // 收起时切换 key 强制重新渲染,重置滚动位置
if (!this.merch.desc) return; this.descKey = this.descKey === 0 ? 1 : 0;
this.isDescExpanded = !this.isDescExpanded; this.isDescExpanded = false;
if (this.isDescExpanded && this.merch.desc.length > 200) { this.isShowScrollHint = false;
this.isShowScrollHint = true; } else {
setTimeout(() => { // 展开时直接设置展开状态
this.isShowScrollHint = false; this.isDescExpanded = true;
}, 3000); if (this.merch.desc.length > 200) {
this.isShowScrollHint = true;
setTimeout(() => {
this.isShowScrollHint = false;
}, 3000);
}
} }
}, },
initHeaderHeight() { initHeaderHeight() {