health-front/pages/index/index.vue

<template>
	<view class="page__view">

		<navbar bgColor="#FFFFFF" >
			<image class="nav-icon" :src="configList.icon_nav_dark" mode="widthFix"></image>
		</navbar>

		<view class="content">
			<view id="productSwiper" class="swiper">
				<productSwiper :autoplay="autoplay.productSwiper"></productSwiper>
			</view>

			<view class="section">
				<sectionHeader title="个性推荐" desc="Personal Recommendation"></sectionHeader>
				<view id="recommendSwiper" class="swiper">
					<recommend-swiper :autoplay="autoplay.recommendSwiper"></recommend-swiper>
				</view>
				<health-records-intro></health-records-intro>
			</view>

			<view class="section">
				<achievement-intro></achievement-intro>
			</view>

			<view class="section">
				<sectionHeader title="团队成员背景" desc="Background of Team Members"></sectionHeader>
				<team-bg-intro></team-bg-intro>
			</view>

			<view class="section">
				<sectionHeader desc="Background of Team Members">
					<template #title>
						关注我们<br/>参与更多健康活动
					</template>
				</sectionHeader>
				<follow-us-intro></follow-us-intro>
			</view>

		</view>

		<tabber select="home" />
		
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import sectionHeader from '@/components/home/sectionHeader.vue'
	import productSwiper from '@/components/home/productSwiper.vue'
	import recommendSwiper from '@/pages_order/home/recommendSwiper.vue'
	import healthRecordsIntro from '@/pages_order/home/healthRecordsIntro.vue'
	import achievementIntro from '@/pages_order/home/achievementIntro.vue'
	import teamBgIntro from '@/pages_order/home/teamBgIntro.vue'
	import followUsIntro from '@/pages_order/home/followUsIntro.vue'

	export default {
		components: {
			productSwiper,
			sectionHeader,
			recommendSwiper,
			healthRecordsIntro,
			achievementIntro,
			teamBgIntro,
			followUsIntro,
			tabber,
		},
		data() {
			return {
				isMounted: false,
        observer: null,
				autoplay: {
					productSwiper: false,
					recommendSwiper: false,
				},
			}
		},
		onLoad() {

			if(uni.getStorageSync('token')){
				this.$store.commit('getUserInfo')
			}

		},
		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>

<style scoped lang="scss">
	.page__view {
		width: 100vw;
		min-height: 100vh;
		background-color: $uni-bg-color;
		position: relative;
	}

	.nav-icon {
		width: 200rpx;
		height: auto;
		vertical-align: top;
	}

	.content {
		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;
	}

	.section {
		margin-top: 80rpx;
	}
</style>