'update'

package.json

@@ -46,6 +46,7 @@
     "@tarojs/taro": "3.6.20",
     "animate.css": "^4.1.1",
     "github-markdown-css": "^5.6.1",
+    "lodash": "^4.17.21",
     "marked": "^14.1.2",
     "raw-loader": "^4.0.2",
     "react": "^18.0.0",

src/pages/index/index.jsx

@@ -24,6 +24,8 @@ import { AtToast } from "taro-ui";
 import { AtIcon } from "taro-ui";
 import { VIEW } from "@tarojs/runtime";
 import "animate.css";
+import _ from "lodash";
+
 import beijing from "../../images/beijing.jpg";
 import shanghai from "../../images/shanghai.jpg";
 import shenzhen from "../../images/shenzhen.jpg";
@@ -50,60 +52,140 @@ import xiayu from "../../images/cloud/xiayu.png";
 import wifi from "../../images/cloud/wifi.png";
 // import nomadcna from "../../images/cloud/nomadcna.jpg";
 import nomadcna from "../../images/cloud/nomadcna.png";
+import nomadBook from "../../images/nomadBook.jpg";
+import wechatGroup from "../../images/wechatGroup.jpg";
 
-import IndexDetail from './componments/IndexDetail/index'
+import IndexDetail from "./componments/IndexDetail/index";
-
-
 
 // export default class Index extends Component {
 const Index = () => {
   const [current, setcurrent] = useState(0);
 
+  // 自定义组件模版
   const custDom = () => {
     return <View className="custDom">custDom</View>;
   };
 
+  // 微信群
+  const weGroup = () => {
+    return (
+      <View className="weGroup">
+        {" "}
+        <Image
+          style="width: 100%;height: 100%;"
+          // mode="heightFix"
+          src={wechatGroup}
+        />
+      </View>
+    );
+  };
+
+  // 微信读书
+  const weBook = () => {
+    return (
+      <View className="weBook">
+        <Image
+          style="width: 100%;height: 100%;"
+          // mode="heightFix"
+          src={nomadBook}
+        />
+      </View>
+    );
+  };
+
+  // 定义初始数据数组
+  const [cityList, setCityList] = useState([
+    { cityName: "大理", img: dali, type: "item", dom: "" },
+    { cityName: "鹤岗", img: hegang, type: "item", dom: "" },
+    { cityName: "北京", img: beijing, type: "item", dom: "" },
+    { cityName: "上海", img: shanghai, type: "item", dom: "" },
+    {
+      cityName: "custDom",
+      img: shenzhen,
+      type: "custom",
+      dom: weGroup(),
+    },
+
+    { cityName: "深圳", img: shenzhen, type: "item", dom: "" },
+    {
+      cityName: "custDom",
+      img: shenzhen,
+      type: "custom",
+      dom: weBook(),
+    },
+    { cityName: "广州", img: guangzhou, type: "item", dom: "" },
+    { cityName: "武汉", img: wuhan, type: "item", dom: "" },
+    { cityName: "杭州", img: hangzhou, type: "item", dom: "" },
+
+    { cityName: "成都", img: chengdu, type: "item", dom: "" },
+    { cityName: "南京", img: nanjing, type: "item", dom: "" },
+    { cityName: "西安", img: xian, type: "item", dom: "" },
+
+    { cityName: "重庆", img: chongqing, type: "item", dom: "" },
+    { cityName: "长沙", img: changsha, type: "item", dom: "" },
+
+    { cityName: "昆明", img: kunming, type: "item", dom: "" },
+    { cityName: "福州", img: fuzhou, type: "item", dom: "" },
+    { cityName: "郑州", img: zhengzhou, type: "item", dom: "" },
+    { cityName: "海口", img: haikou, type: "item", dom: "" },
+
+    { cityName: "荆州", img: jingzhou, type: "item", dom: "" },
+  ]);
+
+  const [oldcityList, setoldCityList] = useState(cityList);
+
+  // 定义屏幕宽度
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  // 监听屏幕宽度变化
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+    window.addEventListener("resize", handleResize);
+
+    // 清除监听器
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  // 当屏幕宽度小于某个值时，改变 custDom 的位置
+  useEffect(() => {
+    if (windowWidth < 768) {
+      // 比如，宽度小于768时，将 custDom 移到第一位
+      // const newCityList = [...cityList];
+      const newCityList = _.cloneDeep(cityList);
+
+      const custDomIndex = newCityList.findIndex(
+        (item) => item.cityName === "custDom"
+      );
+
+      if (custDomIndex !== -1) {
+        const [custDomItem] = newCityList.splice(custDomIndex, 1);
+        newCityList.unshift(custDomItem); // 将 custDomItem 移动到数组开头
+      }
+      setCityList(newCityList);
+    } else {
+      // 屏幕宽度大于 768 时，恢复默认顺序
+      setCityList(oldcityList);
+    }
+  }, [windowWidth, cityList]);
+
   return (
     <View className="Index">
       <View className="up">
-      <View className="upText">  📣数字游民CNA,是针对中国用户的城市数据统计</View>
+        <View className="upText">
+          {" "}
+          📣数字游民CNA,是针对中国用户的城市数据统计
+        </View>
       </View>
       <View className="items">
         {/* 数组尽量是4的倍数 */}
-        {[
+        {/* 随着屏幕变化,改变自定义数组的索引/顺序 */}
-          { cityName: "大理", img: dali, type: "item", dom: "" },
+        {cityList.map((item, index) => {
-          { cityName: "鹤岗", img: hegang, type: "item", dom: "" },
-          { cityName: "北京", img: beijing, type: "item", dom: "" },
-          { cityName: "上海", img: shanghai, type: "item", dom: "" },
-          {
-            cityName: "custDom",
-            img: shenzhen,
-            type: "custom",
-            dom: custDom(),
-          },
-
-          { cityName: "深圳", img: shenzhen, type: "item", dom: "" },
-          { cityName: "广州", img: guangzhou, type: "item", dom: "" },
-          { cityName: "武汉", img: wuhan, type: "item", dom: "" },
-          { cityName: "杭州", img: hangzhou, type: "item", dom: "" },
-
-          { cityName: "成都", img: chengdu, type: "item", dom: "" },
-          { cityName: "南京", img: nanjing, type: "item", dom: "" },
-          { cityName: "西安", img: xian, type: "item", dom: "" },
-
-          { cityName: "重庆", img: chongqing, type: "item", dom: "" },
-          { cityName: "长沙", img: changsha, type: "item", dom: "" },
-
-          { cityName: "昆明", img: kunming, type: "item", dom: "" },
-          { cityName: "福州", img: fuzhou, type: "item", dom: "" },
-          { cityName: "郑州", img: zhengzhou, type: "item", dom: "" },
-          { cityName: "海口", img: haikou, type: "item", dom: "" },
-
-          { cityName: "荆州", img: jingzhou, type: "item", dom: "" },
-        ].map((item, index) => {
           if (item.type === "custom") {
             // 根据屏幕变化,添加自定义组件
-            // return <View className="item"> {item.dom}</View>;
+            return <View className="item"> {item.dom}</View>;
           } else {
             return (
               <View className="item">

src/pages/index/index.scss

@@ -18,6 +18,7 @@
     }
   }
   .items {
+    height: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -34,11 +35,19 @@
       max-width: 330px; /* 设置最大宽度 */
       // width: 100%; /* 确保可以响应式变化 */
       height: 280px;
-      background-color: yellow;
+      // background-color: yellow;
       margin-bottom: 20px;
       border-radius: 5%;
       position: relative;
       color: white;
+
+      .weBook {
+        height: 100%;
+      }
+      .weGroup {
+        height: 100%;
+      }
+
       .itemUp {
         margin-top: 10px;
         display: flex;

yarn.lock

@@ -8115,11 +8115,16 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.npmmirror.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
-"lodash@4.6.1 || ^4.16.1", lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4:
+"lodash@4.6.1 || ^4.16.1", lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4:
   version "4.17.21"
   resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 log-symbols@^2.0.0:
   version "2.2.0"
   resolved "https://registry.npmmirror.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"