feat(merch/detail): add scroll hint for long product description
1. 新增商品详情长描述滚动提示组件,展开长描述时显示3秒 2. 调整描述文本容器底部内边距避免提示遮挡内容 3. 替换原有自动滚动动画为上下弹跳提示动画 4. 优化展开描述的逻辑,展开长文本时触发提示显示
This commit is contained in:
@@ -24,7 +24,13 @@
|
|||||||
<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 }" :style="{ animation: isDescExpanded && merch.desc && merch.desc.length > 200 ? 'autoScroll 2s ease-in-out' : '' }" @click="toggleDesc">{{ merch.desc }}</view>
|
<view class="desc-text" :class="{ 'desc-expanded': isDescExpanded }" @click="toggleDesc">
|
||||||
|
<view>{{ merch.desc }}</view>
|
||||||
|
<view class="scroll-hint" v-if="isShowScrollHint">
|
||||||
|
<text class="scroll-icon">↓</text>
|
||||||
|
<text class="scroll-text">上滑查看更多</text>
|
||||||
|
</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>
|
||||||
</view>
|
</view>
|
||||||
@@ -329,7 +335,8 @@ export default {
|
|||||||
screenWidth: uni.getSystemInfoSync().windowWidth,
|
screenWidth: uni.getSystemInfoSync().windowWidth,
|
||||||
changeStyleDebounce: null,
|
changeStyleDebounce: null,
|
||||||
headerHeightInited: false,
|
headerHeightInited: false,
|
||||||
isDescExpanded: false
|
isDescExpanded: false,
|
||||||
|
isShowScrollHint: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mixins: [list],
|
mixins: [list],
|
||||||
@@ -364,6 +371,12 @@ export default {
|
|||||||
toggleDesc() {
|
toggleDesc() {
|
||||||
if (!this.merch.desc) return;
|
if (!this.merch.desc) return;
|
||||||
this.isDescExpanded = !this.isDescExpanded;
|
this.isDescExpanded = !this.isDescExpanded;
|
||||||
|
if (this.isDescExpanded && this.merch.desc.length > 200) {
|
||||||
|
this.isShowScrollHint = true;
|
||||||
|
setTimeout(() => {
|
||||||
|
this.isShowScrollHint = false;
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
initHeaderHeight() {
|
initHeaderHeight() {
|
||||||
if (!this.merch || !this.merch.merch_name) return;
|
if (!this.merch || !this.merch.merch_name) return;
|
||||||
@@ -457,13 +470,37 @@ export default {
|
|||||||
-webkit-box-orient: unset;
|
-webkit-box-orient: unset;
|
||||||
max-height: 300rpx;
|
max-height: 300rpx;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
|
padding-bottom: 80rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes autoScroll {
|
.scroll-hint {
|
||||||
0% { transform: translateY(0); }
|
position: absolute;
|
||||||
30% { transform: translateY(-100rpx); }
|
bottom: 0;
|
||||||
60% { transform: translateY(-200rpx); }
|
left: 0;
|
||||||
100% { transform: translateY(0); }
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 16rpx 0;
|
||||||
|
background: linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0.8));
|
||||||
|
z-index: 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-icon {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
animation: bounceDown 1s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounceDown {
|
||||||
|
0%, 100% { transform: translateY(0); }
|
||||||
|
50% { transform: translateY(8rpx); }
|
||||||
}
|
}
|
||||||
|
|
||||||
.expand-tip {
|
.expand-tip {
|
||||||
|
|||||||
Reference in New Issue
Block a user