xiongmao/pages/index/sub-health-pool/sub-health-pool.vue

<!-- 亚健康汇 -->
<template>
	<view class="wrap">
		<HeaderViewBar ref='HeaderViewBar' title='亚健康汇' titleColor='#090909' :opacity="scrollTop / 20" backgroundColor='#fff'
			style="position: fixed; top: 0; z-index: 999999999;" backImg='../../../static/return.png'>
		</HeaderViewBar>
		<view class="swiper-box">
			<swiper class="swiper" :circular="true" autoplay="true" interval="4000"
				duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<view class="swiper-item">
						<image :src="item" class="banner-img" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="module">
			<view class="top-module-item" @tap="subHealthPoolDetails">
				<view class="top-module-item-name">疲乏无力</view>
				<image src="../../../static/img-4.png" class="top-module-item-img" mode="aspectFill"></image>
			</view>
			<view class="top-module-item" @tap="subHealthPoolDetails">
				<view class="top-module-item-name">肌肉/关节疼痛</view>
				<image src="../../../static/img-4.png" class="top-module-item-img" mode="aspectFill"></image>
			</view>
			<view class="top-module-item" @tap="subHealthPoolDetails">
				<view class="top-module-item-name">头昏头痛</view>
				<image src="../../../static/img-4.png" class="top-module-item-img" mode="aspectFill"></image>
			</view>
			<view class="top-module-item" @tap="subHealthPoolDetails">
				<view class="top-module-item-name">心悸胸闷</view>
				<image src="../../../static/img-4.png" class="top-module-item-img" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import HeaderViewBar from '../../../components/header-view-bar/header-view-bar.vue';
	export default {
		components: {
			HeaderViewBar,
		},
		data() {
			return {
				headerHeight: 0,
				scrollTop: 0,
				//轮播
				swiperList: [
					'../../../static/banner-1.png',
					'../../../static/banner-1.png',
					'../../../static/banner-1.png'
				],	
				
			}
		},
		onShow() {
			setTimeout(() => {
				const {
					headerHeight,
				} = this.$refs['HeaderViewBar'].getHeaderStyle();
				this.headerHeight = headerHeight;
			}, 20);
		},
		methods: { 
			//跳转详情
			subHealthPoolDetails(){
				uni.navigateTo({
					url:'../sub-health-pool-details/sub-health-pool-details'
				})
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style scoped lang="scss">
	@import "./sub-health-pool.css";
</style>