搜索栏和轮播图

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>