|
|
@ -6,15 +6,11 @@ |
|
|
|
</navbar> |
|
|
|
|
|
|
|
<view class="content"> |
|
|
|
<view id="productSwiper" class="swiper"> |
|
|
|
<productSwiper :autoplay="autoplay.productSwiper"></productSwiper> |
|
|
|
</view> |
|
|
|
<productSwiper></productSwiper> |
|
|
|
|
|
|
|
<view class="section"> |
|
|
|
<sectionHeader title="个性推荐" desc="Personal Recommendation"></sectionHeader> |
|
|
|
<view id="recommendSwiper" class="swiper"> |
|
|
|
<recommend-swiper :autoplay="autoplay.recommendSwiper"></recommend-swiper> |
|
|
|
</view> |
|
|
|
<recommend-swiper></recommend-swiper> |
|
|
|
<health-records-intro></health-records-intro> |
|
|
|
</view> |
|
|
|
|
|
|
@ -66,12 +62,6 @@ |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
isMounted: false, |
|
|
|
observer: null, |
|
|
|
autoplay: { |
|
|
|
productSwiper: false, |
|
|
|
recommendSwiper: false, |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
@ -81,37 +71,7 @@ |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
if (this.isMounted) { |
|
|
|
this.observeElement() |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.observeElement() |
|
|
|
this.isMounted = true |
|
|
|
}, |
|
|
|
unmounted() { |
|
|
|
this.observer.disconnect() |
|
|
|
}, |
|
|
|
onHide() { |
|
|
|
this.observer.disconnect() |
|
|
|
this.observer = null |
|
|
|
this.autoplay.productSwiper = false |
|
|
|
this.autoplay.recommendSwiper = false |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
observeElement() { |
|
|
|
this.observer = uni.createIntersectionObserver(this, { observeAll: true, thresholds: [0, 1] }); |
|
|
|
|
|
|
|
this.observer.relativeTo('.content').observe('.swiper', res => { |
|
|
|
if (res.intersectionRatio === 0) { |
|
|
|
this.autoplay[res.id] = false |
|
|
|
} else if (res.intersectionRatio === 1) { |
|
|
|
this.autoplay[res.id] = true |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
@ -131,10 +91,9 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
// padding: 80rpx 32rpx 182rpx 32rpx; |
|
|
|
width: 100vw; |
|
|
|
height: calc(100vh - (var(--status-bar-height) + 120rpx) - (env(safe-area-inset-bottom) + 120rpx)); |
|
|
|
padding: 70rpx 0 182rpx 0; |
|
|
|
// padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx + 182rpx); |
|
|
|
box-sizing: border-box; |
|
|
|
overflow-x: hidden; |
|
|
|
overflow-y: auto; |
|
|
|