feat: 城市方块自动换行

src/pages/index/index.jsx

@@ -16,7 +16,6 @@ export default function Index() {
   // 用户基本信息
   const [userInfo, setuserInfo] = useState({});
 
-  
   useLoad(() => {
     console.log("Page loaded.");
   });
@@ -51,9 +50,17 @@ export default function Index() {
       { cityName: "上海", imagePath: shanghai },
       { cityName: "广州", imagePath: guangzhou },
       { cityName: "深圳", imagePath: shenzhen },
+      { cityName: "深圳", imagePath: shenzhen },
+      { cityName: "深圳", imagePath: shenzhen },
+      { cityName: "深圳", imagePath: shenzhen },
+
     ].map((item, index) => {
       return (
-        <View className="homeCardItem">
+        // 设置自动换行
+        <View
+          style={{ marginRight: index % 2 != 1 ? "10px" : "0px" }}
+          className="homeCardItem"
+        >
           <View className="homeCard">
             {/* 城市封面图片 */}
             <Image
@@ -67,18 +74,6 @@ export default function Index() {
               src={item.imagePath}
             />
           </View>
-          <View className="homeCard">
-            {/* <Image
-              style={{
-                width: "100%",
-                height: "100%",
-                background: " #fff",
-                borderRadius: "10px",
-              }}
-              mode="scaleToFill"
-              src={item.imagePath}
-            /> */}
-          </View>
         </View>
       );
     });

src/pages/index/index.scss

@@ -1,6 +1,7 @@
 .index {
   padding-left: 20px;
   padding-right: 20px;
+  background-color: aquamarine;
 
   .indexHeader {
     margin-top: 10px;
@@ -21,25 +22,36 @@
 
   .homeCards {
     display: flex;
-    flex-direction: column;
+    // flex-direction: column;
+    flex-direction: row;
+    flex-wrap: wrap;
 
     .homeCardItem {
       margin-top: 10px;
-
+      width: 340px;
+      height: 250px;
       display: flex;
       flex-direction: row;
-      // background-color: aqua;
+      background-color: aqua;
-      justify-content: space-between;
+      // justify-content: space-between;
-      align-items: center;
+      // align-items: center;
       .homeCard {
-        width: 340px;
+        width: 100%;
-        height: 250px;
+        height: 100%;
         background-color: yellow;
         border-radius: 20px;
+        // margin-left:20px;
       }
-    }
-  }
      
+    }
+    .homeCardDiv{
+      width: 30px;
+      height: 100%;
+      background-color: blue;
+    }
+
+  
+  }
   .tabbbarDiv {
     width: 100%;
     height: 140px;