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

待我称王封你为后i 2023-01-14 14:00 122阅读 0赞

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

-->
    <template>
    	<view class="home">
    		<swiper class="swiper" indicator-dots circular>
    			
    			
    			
    			<swiper-item v-for="item in swipers" :key = "item.id">
    				
    				<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>