family/education_uni/pages/home/home.vue

<template>
	<view>
		<!-- 使用自定义的搜索组件 -->
		<view class="search-box">
			<uni-row>
				<uni-col :span="4">
					<view class="my-location" @click="getLocations">
						<view class="location-text">位置</view>
						<uni-icons type="location-filled" size="20">位置</uni-icons>
					</view>
				</uni-col>
				<uni-col :span="20">
					<my-search @click="gotoSearch" bgcolor="#F5F5F5"></my-search>
				</uni-col>
			</uni-row>
		</view>
		<uni-swiper-dot :info="info" :current="current">
			<swiper class="swiper-box" autoplay circular @change="change">
				<swiper-item v-for="(item ,index) in info" :key="index">
					<view class="swiper-item">
						<image :src="item.url"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [],
				current: 0
			}
		},
		created() {
			this.getSwiperList()
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			gotoSearch() {
				uni.navigateTo({
					url: '/subpkg/search/search'
				})
			},
			// 获取轮播图列表
			async getSwiperList() {
				const {
					data: result
				} = await uni.$http.get('/education/swiper/getSwiperList')
				this.info = result.data.list
			},
			// 滑动轮播图触发
			change(e) {
				this.current = e.detail.current
			},
			getLocations() {
				console.log("hhh")
				wx.choosePoi({
					success(res) {
						console.log(res)
					}
				})

			}
		}
	}
</script>
<style scoped lang="scss">
	.search-box {
		// 设置定位效果为“吸顶”
		position: sticky;
		// 吸顶的“位置”
		top: 0;
		// 提高层级，防止被轮播图覆盖
		z-index: 999;
	}

	.my-location {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50px;
	}

	.swiper-box {
		height: 350rpx;
	}

	.swiper-item {
		display: block;
		height: 350rpx;
		line-height: 350rpx;
		text-align: center;

		image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}
</style>