fix(merch/detail): 修复商户描述展开后滚动收起位置异常的问题
通过 key 强制重新渲染描述区域,重置滚动位置。合并重复的 toggleDesc 方法。
Sources:
- 61243b8 feat(merch/detail): add scroll hint for long product description
This commit is contained in:
@@ -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() {
|
||||||
|
|||||||
Reference in New Issue
Block a user