ysh/uni-app/pages/index/index.vue

<template>
	<view class="page">
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<!-- page1 -->
					<swiper class="swiper" vertical="true">
						<swiper-item>
							<view class="scoped-options" @click="linkDtl('32')">
								<image src="/static/images/index/ggn.jpg" class="bg" mode="widthFix"></image>
							</view>
							<image src="/static/images/index/xiala.gif" class="xiala_img"></image>
						</swiper-item>
						<!-- page2 -->
						<swiper-item>
							<view class="scoped-options b2" @click="$utils.navigateTo('goods/view',{ id: 34 })">
								<image src="/static/images/index/sj.jpg" class="bg" mode="widthFix"></image>
							</view>
							<image src="/static/images/index/xiala.gif" class="xiala_img"></image>
						</swiper-item>
						<!-- page3 -->
						<swiper-item>
							<view class="scoped-options b3" @click="$utils.navigateTo('goods/view',{ id: 36 })">
								<image src="/static/images/index/nh.jpg" class="bg" mode="widthFix"></image>
							</view>
							<!-- <image src="/static/images/index/xiala.gif" class="xiala_img"></image> -->
						</swiper-item>
					</swiper>
				</view>
				</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
 
		},
		onShow () {
			uni.hideTabBar()
		},
		onHide () {
			uni.showTabBar()
		},
		methods: {
			linkDtl (id) {
				uni.navigateTo({
					url: `/pages/goods/view?id=${id}`
				})
			}
		}
	}
</script>
 
<style lang="scss" scoped>
.page {
	width: 100%;
	height: 100vh;
}

.uni-padding-wrap {
	width: 100%;
	height: 100%;
	padding: 0;
}

.swiper {
	width: 100%;
	height: 100vh;
}

.xiala_img {
	height: 56upx;
	width: 56upx;
	position: absolute;
	bottom: 10upx;
	left: 338upx;
}

.noMorePages {
	width: 100%;
	text-align: center;
	height: 56upx;
	line-height: 56upx;
	position: absolute;
	bottom: 10upx;
	color: #333;
}


.scoped-options {
	background: #305826;
	&.b2 {
		background: #447b41;
	}
	&.b3 {
		background: #3e7139;
	}
	height: 100%;
	.bg {
		width: 100%;
	}
}

</style>