静态页面

project.config.json

@@ -5,23 +5,30 @@
 	"appid": "wx1a0fa56e6d0b78b3",
 	"setting": {
 		"urlCheck": false,
-		"scopeDataCheck": false,
-		"coverView": true,
 		"es6": false,
+		"enhance": false,
 		"postcss": false,
-		"compileHotReLoad": false,
 		"preloadBackgroundData": false,
 		"minified": false,
-		"autoAudits": false,
 		"newFeature": false,
+		"coverView": true,
+		"nodeModules": false,
+		"autoAudits": false,
+		"showShadowRootInWxmlPanel": true,
+		"scopeDataCheck": false,
 		"uglifyFileName": false,
+		"checkInvalidKey": true,
+		"checkSiteMap": true,
 		"uploadWithSourceMap": true,
+		"compileHotReLoad": false,
+		"babelSetting": {
+			"ignore": [],
+			"disablePlugins": [],
+			"outputPath": ""
+		},
 		"useIsolateContext": true,
-		"nodeModules": false,
-		"enhance": false,
 		"useCompilerModule": false,
-		"userConfirmedUseCompilerModuleSwitch": false,
-		"showShadowRootInWxmlPanel": true
+		"userConfirmedUseCompilerModuleSwitch": false
 	},
 	"compileType": "miniprogram",
 	"simulatorType": "wechat",

src/pages/index/components/IndexBanner/index.jsx

@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import { Swiper, SwiperItem, Image } from '@tarojs/components'
+
+export default function IndexBanner (props) {
+  const { List = [] } = props
+  return (
+    <view className='components IndexBanner'>
+      <Swiper autoplay={true} interval={2000} indicator-dots={true}>
+        {
+          List.map((item, index) => (
+            <SwiperItem key={`Banner-${index}`}>
+              <view className="swiper-item">
+                {
+                  item.img &&
+                  <Image mode='aspectFill' className='centerLabel' src={item.img || null} />
+                }
+              </view>
+            </SwiperItem>
+          ))
+        }
+      </Swiper>
+    </view>
+  )
+}

src/pages/index/components/IndexBanner/index.scss

@@ -0,0 +1,18 @@
+.components.IndexBanner {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  background: #ccc;
+  position: relative;
+  overflow: hidden;
+  > swiper {
+    width: 100%;
+    height: 100%;
+    .swiper-item {
+      > image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}

src/pages/index/components/IndexColumnTitle/index.jsx

@@ -0,0 +1,20 @@
+import React, { useState, useEffect } from 'react'
+import './index.scss'
+
+export default function IndexColumnTitle (props) {
+  const { Icon = '', Name = '', ToMore = () => { }, children } = props
+  return (
+    <view className='components IndexColumnTitle flex-h'>
+      <text className={`iconfont ${Icon}`}></text>
+      <text className='Name'>{Name}</text>
+      {
+        children
+      }
+      <view className='flex-item'></view>
+      <view className='More' onClick={ToMore}>
+        <text>更多</text>
+        <text className='iconfont'></text>
+      </view>
+    </view>
+  )
+}

src/pages/index/components/IndexColumnTitle/index.scss

@@ -0,0 +1,3 @@
+.components.IndexColumnTitle {
+  align-items: center;
+}

src/pages/index/components/IndexMenu/index.jsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import { Image } from '@tarojs/components'
+
+export default function IndexMenu (props) {
+  const { List = [] } = props
+  return (
+    <view className='components IndexMenu'>
+
+      {/* tab */}
+      <view className='Tab flex-h'>
+        <view>
+          <text className='active'>住宅</text>
+        </view>
+        <view>
+          <text>文旅</text>
+        </view>
+        <view>
+          <text>商办</text>
+        </view>
+        <view>
+          <text>康养</text>
+        </view>
+      </view>
+
+      {/* menu */}
+      <view className='MenuList'>
+        {
+          List.map((item, index) => (
+            <view className='MenuItem' key={`MenuItem-${index}`}>
+              <view className='Img'>
+                {
+                  item.img &&
+                  <Image mode='aspectFit' className='centerLabel' src={item.img || null} />
+                }
+              </view>
+              <view className='Name'>菜单名称</view>
+            </view>
+          ))
+        }
+      </view>
+
+    </view>
+  )
+}

src/pages/index/components/IndexMenu/index.scss

@@ -0,0 +1,99 @@
+.components.IndexMenu {
+  padding: 0 20px;
+  position: relative;
+  overflow: hidden;
+  > .Tab {
+    border-bottom: 2px solid #eee;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    > view {
+      flex: 5;
+      -webkit-flex: 5;
+      text-align: center;
+      font-size: 0;
+      position: relative;
+      overflow: hidden;
+      &::after {
+        content: "";
+        display: block;
+        height: 40px;
+        width: 2px;
+        top: 50%;
+        left: 0;
+        position: absolute;
+        transform: translateY(-50%);
+        -webkit-transform: translateY(-50%);
+        background: #eee;
+      }
+      &:first-child {
+        text-align: left;
+        flex: 3;
+        -webkit-flex: 3;
+        &::after {
+          display: none;
+        }
+      }
+      &:last-child {
+        text-align: right;
+        flex: 3;
+        -webkit-flex: 3;
+      }
+      > text {
+        display: inline-block;
+        font-size: 32px;
+        position: relative;
+        line-height: 80px;
+        &.active {
+          font-weight: bold;
+          &::after {
+            content: "";
+            display: block;
+            position: absolute;
+            left: 50%;
+            bottom: 0;
+            transform: translateX(-50%);
+            -webkit-transform: translateX(-50%);
+            height: 4px;
+            width: 100%;
+            background: blue;
+          }
+        }
+      }
+    }
+  }
+  > .MenuList {
+    position: relative;
+    overflow: hidden;
+    font-size: 0;
+    padding-bottom: 30px;
+    > view {
+      display: inline-block;
+      vertical-align: middle;
+      width: 20%;
+      position: relative;
+      overflow: hidden;
+      text-align: center;
+      margin-top: 30px;
+      > .Img {
+        width: 90px;
+        height: 90px;
+        position: relative;
+        overflow: hidden;
+        background: #ccc;
+        margin: 0 auto;
+        > image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      > .Name {
+        text-align: center;
+        font-size: 28px;
+        line-height: 40px;
+        text-align: center;
+        margin-top: 6px;
+      }
+    }
+  }
+}

src/pages/index/components/SubBanner/index.jsx

@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import { Swiper, SwiperItem, Image } from '@tarojs/components'
+
+export default function SubBanner (props) {
+  const { List = [] } = props
+  return (
+    <view className='components SubBanner'>
+      <Swiper autoplay={true} interval={2000} indicator-dots={true}>
+        {
+          List.map((item, index) => (
+            <SwiperItem key={`Banner-${index}`}>
+              <view className="swiper-item">
+                {
+                  item.img &&
+                  <Image mode='aspectFill' className='centerLabel' src={item.img || null} />
+                }
+              </view>
+            </SwiperItem>
+          ))
+        }
+      </Swiper>
+    </view>
+  )
+}

src/pages/index/components/SubBanner/index.scss

@@ -0,0 +1,18 @@
+.components.SubBanner {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  background: #ccc;
+  position: relative;
+  overflow: hidden;
+  > swiper {
+    width: 100%;
+    height: 100%;
+    .swiper-item {
+      > image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}

src/pages/index/index.jsx

@@ -1,51 +1,85 @@
 import React, { useState, useEffect } from 'react'
 import withLayout from '@/layout'
 import './index.scss'
-import { Swiper, SwiperItem, Image, ScrollView } from '@tarojs/components'
+import IndexBanner from './components/IndexBanner/index'
+import IndexMenu from './components/IndexMenu/index'
+import SubBanner from './components/SubBanner/index'
+import IndexColumnTitle from './components/IndexColumnTitle/index'
+import { ScrollView } from '@tarojs/components'
 
 export default withLayout((props) => {
 
-  const [PageProps] = useState(props)
+  // const [PageProps] = useState(props)
   const [BannerList, setBannerList] = useState(['', '', ''])
+  const [MenuList, setMenuList] = useState(['', '', '', '', '', '', '', '', '', ''])
+  const [SubBannerList, setSubBannerList] = useState(['', '', ''])
   const [IsPull, setPull] = useState(false)
   const [PullTimer, setPullTimer] = useState(null)
 
   const PageRefresh = () => { // 页面下拉刷新回调
-    clearTimeout(PullTimer)
     setPull(true)
-    setPullTimer(setTimeout(() => {
-      setPull(false)
-    }, 2000))
   }
 
+  useEffect(() => { // 下拉刷新触发
+    if (IsPull) {
+      clearTimeout(PullTimer)
+      setPullTimer(setTimeout(() => {
+        setPull(false)
+      }, 2000))
+    }
+  }, [IsPull])
+
   return (
     <view className='Page Index'>
 
-      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#f8f8f8'>
+      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
         <view className='PageContent'>
 
           {/* banner */}
           <view className='Banner'>
             <view>
               <view>
-                <Swiper autoplay={true} interval={2000} indicator-dots={true}>
-                  {
-                    BannerList.map((item, index) => (
-                      <SwiperItem key={`Banner-${index}`}>
-                        <view className="swiper-item">
-                          {
-                            item.img &&
-                            <Image mode='widthFix' className='centerLabel' src={item.img || null} />
-                          }
-                        </view>
-                      </SwiperItem>
-                    ))
-                  }
-                </Swiper>
+                <IndexBanner List={BannerList}></IndexBanner>
+              </view>
+            </view>
+          </view>
+
+          {/* menu */}
+          <view className='IndexMenu'>
+            <view>
+              <IndexMenu List={MenuList}></IndexMenu>
+            </view>
+          </view>
+
+          {/* sub banner */}
+          <view className='SubBanner'>
+            <view>
+              <view>
+                <SubBanner List={SubBannerList}></SubBanner>
               </view>
             </view>
           </view>
 
+          {/* hot activity */}
+          <view className='HotActivity'>
+            <IndexColumnTitle Name='热门活动'></IndexColumnTitle>
+          </view>
+
+          {/* all project */}
+          <view className='AllProject'>
+            <IndexColumnTitle Name='所有项目'>
+              <view className='ToMap'>
+                <text className='iconfont'></text>
+                <text>地图找房</text>
+              </view>
+            </IndexColumnTitle>
+          </view>
+
+          {/* bottom */}
+          <view className='PageBottom'>
+            <text>已经到底了~</text>
+          </view>
+
         </view>
       </ScrollView>
 

src/pages/index/index.scss

@@ -1,37 +1,63 @@
 .Page.Index {
-  background: #f8f8f8;
-  .PageContent {
-    position: relative;
-    overflow: hidden;
-    min-height: 100vh;
-    > .Banner {
-      padding: 0 30px;
+  background: #fff;
+  > scroll-view {
+    width: 100%;
+    height: 100%;
+    .PageContent {
       position: relative;
       overflow: hidden;
-      margin-top: 30px;
-      > view {
+      min-height: 100vh;
+      > .Banner {
+        padding: 0 30px;
         position: relative;
         overflow: hidden;
-        width: 100%;
-        padding-bottom: 56.25%;
+        // margin-top: 30px;
         > view {
+          position: relative;
+          overflow: hidden;
           width: 100%;
-          position: absolute;
-          left: 0;
-          top: 0;
-          bottom: 0;
+          padding-bottom: 56.25%;
+          > view {
+            width: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            overflow: hidden;
+          }
+        }
+      }
+      > .IndexMenu {
+        padding: 0 30px;
+        position: relative;
+        overflow: visible;
+        > view {
+          position: relative;
           overflow: hidden;
+          background: #fff;
           border-radius: 10px;
-          background: #ccc;
-          > swiper {
+          min-height: 40px;
+          margin-top: 30px;
+          box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.05);
+        }
+      }
+      > .SubBanner {
+        padding: 0 30px;
+        position: relative;
+        overflow: hidden;
+        margin-top: 30px;
+        > view {
+          position: relative;
+          overflow: hidden;
+          width: 100%;
+          padding-bottom: 30%;
+          > view {
             width: 100%;
-            height: 100%;
-            .swiper-item {
-              > image {
-                width: 100%;
-                height: 100%;
-              }
-            }
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            overflow: hidden;
           }
         }
       }