canteen/pages/home/home.vue

<template>
	<view>
		<view class="search-box">
			<my-search  @click="gotoSearch"></my-search>
		</view>
		<swiper :class="swiper" :indicator-dots="true " :autoplay="true" :interval="3000" :duration="1000"
			:circular="true">
			<swiper-item v-for="(item,i) in swiperList" :key="i">
				<image class="image" :src="item.image_src"></image>
			</swiper-item>
		</swiper>
		<view class="dishes-list">
			<view v-for="(dishes, i) in floorList" :key="i" @click="gotoDetail(dishes)">
				<view class=" dishes-item">
					<!-- 菜品左侧图片区域 -->
					<view class="dishes-item-left">
						<image :src="dishes.dish_src" class="dishes-pic"></image>
					</view>
					<!-- 菜品右侧信息区域 -->
					<view class="dishes-item-right">
						<!-- 菜品标题 -->
						<view class="dishes-name">{{dishes.dish_name}}</view>
						<view class="dishes-info-box">
							{{dishes.location}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from "vuex";
	export default {
		name: "swiper-index",
		
		data() {
			return {
				swiperList: [],
				floorList: []
			};

		},
		onLoad() {
			this.getSwiperList()
			this.getFloorList()
			const sysInfo = uni.getSystemInfoSync()
			  // 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
			this.wh = sysInfo.windowHeight - 50
		},
		methods: {
			 gotoSearch() {
			     uni.navigateTo({
			       url: '/subpkg/search/search'
			     })
			},
			gotoDetail(dishes) {
				uni.navigateTo({
					url:'/subpkg/dishDetail/dishDetail?_id='+encodeURIComponent(JSON.stringify(dishes._id))
					
				})
			},
			getSwiperList() {
				let that = this
				uniCloud.callFunction({
					name: "getSwiperImage",
					data: "",
					success: function(res) {
						that.swiperList = res.result
						console.log(res)
					}
				})
			},
			getFloorList() {
				let that = this
				uniCloud.callFunction({
					name: "getDishes",
					data: {
						api: "getFloorList"
					},
					success: function(res) {
						that.floorList = res.result.data
						console.log(res)
					}
				})
			},

		}
	}
</script>

<style lang="scss">
	.swiper {
		height: 50rpx;
		z-index: -1;
	}

	.image {
		width: 100%;
		height: 100%;
	}

	.dishes-item {
		display: flex;
		padding: 10px 5px;
		border-bottom: 1px solid #f0f0f0;
    }
	.dishes-item-left {
		margin-right: 5px;
	}

	.dishes-pic {
		width: 100px;
		height: 100px;
		display: block;
	}

	.dishes-item-right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
    }
	.dishes-name {
		font-size: 13px;
	}

	.dishes-price {
		font-size: 16px;
		color: #c00000;
	}
	.search-box {
	  // 设置定位效果为“吸顶”
	  position: sticky;
	  // 吸顶的“位置”
	  top: 0;
	  // 提高层级，防止被轮播图覆盖
	  z-index: 999;
	}

	
</style>