From 9671a7e3f444c96406fbdde5e53e85a370954198 Mon Sep 17 00:00:00 2001
From: "jqtmviyu@gmail.com" <jqtmviyu@gmail.com>
Date: Sun, 21 Feb 2021 08:56:49 +0800
Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=A0=8F=E5=92=8C=E8=BD=AE?=
 =?UTF-8?q?=E6=92=AD=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/index.vue | 63 +++++++++++++++++++++++++++++++++++----
 1 file changed, 58 insertions(+), 5 deletions(-)

diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index d1ef61a..fc0ae77 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,6 +1,15 @@
 <template>
 	<view class="content">
-    <u-button>默认按钮</u-button>
+    <!-- 1.搜索栏 -->
+    <view class="search">
+      <u-search placeholder="搜索" :show-action="false"></u-search>
+    </view>
+
+    <!-- 2.轮播图 -->
+    <view class="swiper">
+      <u-swiper :list="list" height="340" border-radius="0"></u-swiper>
+    </view>
+
 	</view>
 </template>
 
@@ -8,11 +17,44 @@
 	export default {
 		data() {
 			return {
-				title: 'Hello'
+        list: [
+          // {
+					// 	image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
+					// 	title: '昨夜星辰昨夜风，画楼西畔桂堂东'
+					// },
+					// {
+					// 	image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
+					// 	title: '身无彩凤双飞翼，心有灵犀一点通'
+					// },
+					// {
+					// 	image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
+					// 	title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
+					// }
+				]
 			}
-		},
+    },
+    // 页面生命周期
 		onLoad() {
-
+      uni.request({
+        url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
+      })
+      // .then(console.log)
+      //promise会传递参数给它
+      .then(res=>{
+        const message = res[1].data.message
+        // 方法1
+        /* 
+        message.forEach(v => {
+          v.image = v.image_src
+        })
+        this.list = [...message]
+        */
+        //方法2
+        this.list = message.map(v=>({
+          ...v,image:v.image_src
+        }))
+        //箭头函数后面跟({}), 就不会把大括号解析成语句块的开始, 而是对象的一部分,()包起来, 相当于return
+      })
 		},
 		methods: {
 
@@ -21,5 +63,16 @@
 </script>
 
 <style lang="scss">
-
+  .search {
+    /* 
+    设计稿375px
+    375px = 750rpx
+    5px = 10rpx
+    */
+    padding: 10rpx;
+    background-color: #eb4450;
+    /* 
+    轮播图750px宽, 340px高
+     */
+  }
 </style>