23.uniapp完成首页轮播图的渲染

复制到编译对照页面看看就一目了然了

<!-- 总结：	<!-- 一共需要三点	：	1. id(key)	2. img(image绑定)	3.url (url.request({})	在js中发送请求) --> -->
<template>
	<view class="home">
		<swiper class="swiper" indicator-dots circular>
			<!-- 一种：请求数据动态渲染 -->
			
			<!-- // 当时key没有想到	item里面的id 	下面需要绑定		图片也需要动态绑定-->
			<swiper-item v-for="item in swipers" :key = "item.id">
				<!-- 动态绑定src 	然后	值是	item下面的img -->
				<image :src='item.img' mode=""></image>
			</swiper-item>
			
			<!-- 二种： -->
			<!-- 普通的死页面的数据 	上面请求接口数据-->
			<swiper-item>
				<image src="//img12.360buyimg.com/babel/s590x470_jfs/t1/157624/32/20088/176079/607b173eE2c3646a9/f74884a2ecca34a0.jpg.webp" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image src="//imgcps.jd.com/img-cubic/creative_server_cia/v1/FocusFullshop/CkJqZnMvdDEvMTIyMDk2LzIvMTUwNjEvOTIyNzMvNWY4NzE5OWVFZWJkZTNiZTQvZDQ3ZWI0OWExNTNiMDA3NC5qcGcSCjk5OS10eV8wXzEwATjui3o/cr/s/q.jpg" mode=""></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				swipers:[]
			}
		},
		methods:{
			// 第一种：
			// 获取轮播图的数据
			// getSwipers(){		// 每次打开页面都会调用数据		在生命周期中	onload页面声明周期最适合
			// 	console.log("获取轮播图数据")
			// 	// 发送请求获取数据		文档API	网络	发起请求
			// 	uni.request({
			// 		url:"http://localhost:8082/api/getlunbo",
			// 		success:res => {
			// 			console.log(res);		// 到这里写完后在到data里面存到里面
			// 			// 判断一下	需要用到方法文档		API	界面交互反馈uni.showToast(OBJECT)
			// 			if(res.data.status !== 0){		// 意思打印请求数据看到的	res.data.status
			// 				return uni.showToast({
			// 					title:"获取数据失败",
			// 				})
			// 			}
			// 			// 否则		成功返回并存放到data数据里面
			// 			this.swipers = res.data.message		///	message打印看到的
			// 		}
			// 	})
			// 	// 第二种
			// 协防或者这样写法也对
			// 	// async getSwipers () {
			// 	// 	const res = await uni.request({
			// 	// 		url:"http://localhost:8082/api/getlunbo"
			// 	// 	})
			// 	// 	console.log(res)
			// 	// }
			// },
			// 第三种
			// 调用全局封装接口	直接调用可以使用
			async getSwipers() {
				const res = await this.$myRequest({
					url:'/api/getlunbo'
				})
				this.swipers = res.data.message
			}
		},
		onLoad(){
			this.getSwipers();
		}
	}
</script>

<style lang="scss" scoped>
	.home{
		.swiper{
			width: 750rpx;
			height: 380rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>