静态页面

project.config.json

@@ -1,13 +1,30 @@
 {
-  "miniprogramRoot": "./dist",
-  "projectname": "miniapp",
-  "description": "",
-  "appid": "wx1a0fa56e6d0b78b3",
-  "setting": {
-    "urlCheck": false,
-    "es6": false,
-    "postcss": false,
-    "minified": false
-  },
-  "compileType": "miniprogram"
-}
+	"miniprogramRoot": "dist/",
+	"projectname": "miniapp",
+	"description": "",
+	"appid": "wx1a0fa56e6d0b78b3",
+	"setting": {
+		"urlCheck": false,
+		"scopeDataCheck": false,
+		"coverView": true,
+		"es6": false,
+		"postcss": false,
+		"compileHotReLoad": false,
+		"preloadBackgroundData": false,
+		"minified": false,
+		"autoAudits": false,
+		"newFeature": false,
+		"uglifyFileName": false,
+		"uploadWithSourceMap": true,
+		"useIsolateContext": true,
+		"nodeModules": false,
+		"enhance": false,
+		"useCompilerModule": false,
+		"userConfirmedUseCompilerModuleSwitch": false,
+		"showShadowRootInWxmlPanel": true
+	},
+	"compileType": "miniprogram",
+	"simulatorType": "wechat",
+	"simulatorPluginLibVersion": {},
+	"condition": {}
+}

src/app.scss

@@ -0,0 +1,35 @@
+page,
+.Page {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.centerLabel {
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+}
+
+.flex-h {
+  display: flex;
+  display: -webkit-flex;
+}
+
+.flex-v {
+  display: flex;
+  display: -webkit-flex;
+  flex-direction: column;
+  -webkit-flex-direction: column;
+}
+
+.flex-item {
+  flex: 1;
+  -webkit-flex: 1;
+  position: relative;
+  overflow: hidden;
+}

src/pages/index/index.config.js

@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: '首页'
+  navigationBarTitleText: '新联康'
 }

src/pages/index/index.jsx

@@ -1,9 +1,54 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import withLayout from '@/layout'
+import './index.scss'
+import { Swiper, SwiperItem, Image, ScrollView } from '@tarojs/components'
 
 export default withLayout((props) => {
-  // props 里面包含了一些基本的信息
-  console.log('-----props---->', props)
 
-  return '这里是小程序首页';
+  const [PageProps] = useState(props)
+  const [BannerList, setBannerList] = useState(['', '', ''])
+  const [IsPull, setPull] = useState(false)
+  const [PullTimer, setPullTimer] = useState(null)
+
+  const PageRefresh = () => { // 页面下拉刷新回调
+    clearTimeout(PullTimer)
+    setPull(true)
+    setPullTimer(setTimeout(() => {
+      setPull(false)
+    }, 2000))
+  }
+
+  return (
+    <view className='Page Index'>
+
+      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#f8f8f8'>
+        <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>
+              </view>
+            </view>
+          </view>
+
+        </view>
+      </ScrollView>
+
+    </view>
+  )
 })

src/pages/index/index.scss

@@ -0,0 +1,40 @@
+.Page.Index {
+  background: #f8f8f8;
+  .PageContent {
+    position: relative;
+    overflow: hidden;
+    min-height: 100vh;
+    > .Banner {
+      padding: 0 30px;
+      position: relative;
+      overflow: hidden;
+      margin-top: 30px;
+      > view {
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+        padding-bottom: 56.25%;
+        > view {
+          width: 100%;
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          overflow: hidden;
+          border-radius: 10px;
+          background: #ccc;
+          > swiper {
+            width: 100%;
+            height: 100%;
+            .swiper-item {
+              > image {
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}